Skip to content

Commit

Permalink
feat: introduce UIPOptions component and html refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
pvalchetskaya committed Mar 23, 2021
1 parent ac49706 commit a68a9d0
Show file tree
Hide file tree
Showing 13 changed files with 315 additions and 207 deletions.
321 changes: 151 additions & 170 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,193 +1,174 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>UI Playground</title>
<title>UI Playground</title>

<style>
* { margin: 0; padding: 0; }
</style>
<link type="text/css" rel="stylesheet" href="/playground.css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
<link type="text/css" rel="stylesheet" href="/playground.css">
</head>
<body>
<header class="header"></header>
<main role="main">
<uip-root>
<div class="uip-options">
<span class="section-name">Options:</span>

<div class="uip-option mode">
<button class="option-item" mode="vertical">vertical</button>
<button class="option-item" mode="horizontal">horizontal</button>
</div>

<div class="uip-option theme">
<button class="option-item" theme="light">light</button>
<button class="option-item" theme="dark">dark</button>
</div>
</div>
<uip-options mode theme></uip-options>

<div class="uip-content {{= !layout.settings ? 'no-settings' : '' }}">
<div class="snippets-wrapper">
<span class="section-name">Snippets</span>
<div class="snippets-section">
<uip-snippets>
<template uip-snippet label="example 1">
<span>hello 1</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>

<ul class="snippets-list"></ul>
</uip-snippets>
</div>
</div>
<uip-snippets>
<template uip-snippet label="example 1">
<span>hello 1</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
<template uip-snippet label="example 2">
<span>hello 2</span>
</template>
</uip-snippets>

<div class="sections-wrapper">

<div class="preview-settings">
<uip-preview></uip-preview>

<div class="settings-wrapper">
<span class="section-name">Settings</span>
<uip-settings>
<uip-check-setting name="check" selector="p"></uip-check-setting>
<uip-check-setting name="check" selector="p"></uip-check-setting>
<uip-list-setting name="check" selector="p">
<uip-list-item value="1">1</uip-list-item>
<uip-list-item value="2">2</uip-list-item>
</uip-list-setting>
<uip-text-setting name="check" selector="p"></uip-text-setting>
</uip-settings>
</div>
</div>
<uip-settings>
<uip-check-setting name="check" selector="p"></uip-check-setting>
<uip-check-setting name="check" selector="p"></uip-check-setting>
<uip-list-setting name="check" selector="p">
<uip-list-item value="1">1</uip-list-item>
<uip-list-item value="2">2</uip-list-item>
</uip-list-setting>
<uip-text-setting name="check" selector="p"></uip-text-setting>
</uip-settings>

<div class="editor-wrapper">
<span class="section-name">Editor</span>
<uip-editor editor-config="{wrap: 70}"></uip-editor>
</div>

<uip-editor></uip-editor>


</div>
</div>
</uip-root>
Expand Down
Loading

0 comments on commit a68a9d0

Please sign in to comment.