mirror of
https://github.com/lovasoa/whitebophir
synced 2024-09-20 14:21:54 +00:00
UI improvements
This commit is contained in:
Ophir LOJKINE
parent
bf616de4f9
commit
2024899c8e
5 changed files with 112 additions and 66 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
|
|
@ -9,19 +9,19 @@ html, body, svg {
|
|||
|
||||
#menu {
|
||||
font-family: "sans";
|
||||
font-size:.7vw;
|
||||
font-size: 16px;
|
||||
border-radius:0;
|
||||
box-shadow: 0px 0px 9px black;
|
||||
overflow:hidden;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:0;
|
||||
color:black;
|
||||
background-color:rgba(87, 154, 255, 0.9);
|
||||
width:13vw;
|
||||
height:100%;
|
||||
transition-duration:1s;
|
||||
cursor:default;
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#menu.closed {
|
||||
|
|
@ -40,6 +40,7 @@ html, body, svg {
|
|||
}
|
||||
|
||||
#menu h2{ /*Menu title ("Menu")*/
|
||||
display: none;
|
||||
font-size:4vh;
|
||||
text-align: center;
|
||||
letter-spacing:.5vw;
|
||||
|
|
@ -51,88 +52,100 @@ html, body, svg {
|
|||
|
||||
#menu h3 { /*Section titles ("tools", "configuration")*/
|
||||
font-size:1vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu .tools {
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
font-family: Liberation sans, sans;
|
||||
}
|
||||
|
||||
#menu .tool {
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: auto;
|
||||
white-space: nowrap;
|
||||
list-style-position:inside;
|
||||
color:#335;
|
||||
border:0;
|
||||
text-decoration:none;
|
||||
width:100%;
|
||||
transition-duration:0.5s;
|
||||
cursor:pointer;
|
||||
background: linear-gradient( #C4DFFF, #8FA2BC);
|
||||
margin-top: 10px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 30px;
|
||||
max-width: 60px;
|
||||
transition-duration: .5s;
|
||||
overflow: hidden;
|
||||
width: max-content;
|
||||
box-shadow: inset 0 0 3px #8FA2BC;
|
||||
}
|
||||
|
||||
|
||||
@keyframes minimize {
|
||||
to {max-width:100%;}
|
||||
}
|
||||
#menu .tool:hover {
|
||||
color:black;
|
||||
transition-duration:0.5s;
|
||||
animation-name: minimize;
|
||||
animation-duration: 1.2s;
|
||||
animation-iteration-count: 2;
|
||||
animation-timing-function: cubic-bezier(.08,.82,.17,1);
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
#menu .tool:focus-within,
|
||||
#menu #settings .tool:hover {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
#menu .tool.curTool {
|
||||
box-shadow: 0 0 2px white;
|
||||
background-color:rgb(255, 66, 66);
|
||||
text-shadow: 0px 0px 3px white;
|
||||
transition-duration:0.5s;
|
||||
color: black;
|
||||
box-shadow: 0 0 5px #0074D9;
|
||||
background: linear-gradient(#96E1FF, #36A2FF);
|
||||
}
|
||||
|
||||
#menu .tool-icon {
|
||||
text-align:center;
|
||||
font-size:2.5vh;
|
||||
padding:.1vw;
|
||||
width:1.5vw;
|
||||
display: inline-block;
|
||||
text-align:center;
|
||||
font-size:24px;
|
||||
width: 30px;
|
||||
margin-left: 15px;
|
||||
margin-right: 26px;
|
||||
height: 30px;
|
||||
max-height: 24px;
|
||||
height: 100%;
|
||||
margin: 0px 26px auto 15px;
|
||||
font-family: mono;
|
||||
}
|
||||
|
||||
#menu .tool-icon > * {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#menu .tool-name {
|
||||
margin-left: .5vw;
|
||||
font-size:2.5vh;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
#menu .tool-name.slider {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 1.3em;
|
||||
line-height: 25px;
|
||||
vertical-align: top;
|
||||
padding: 6px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#menu {
|
||||
font-size:1vw;
|
||||
}
|
||||
#menu .tool-name {
|
||||
display: none;
|
||||
}
|
||||
#menu .tool-icon {
|
||||
width:100%;
|
||||
font-size:5vw;
|
||||
padding:0;
|
||||
}
|
||||
#menu h2 {
|
||||
white-space: nowrap;
|
||||
font-size:2.5vw;
|
||||
}
|
||||
#menu h3 {
|
||||
font-size:1.2vw;
|
||||
margin-top:0;
|
||||
}
|
||||
#chooseColor {
|
||||
width:100%;
|
||||
}
|
||||
.rangeChooser {
|
||||
width:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
#chooseColor {
|
||||
width:5vw;
|
||||
height:2vh;
|
||||
height:100%;
|
||||
border:1px solid black;
|
||||
border-radius:3px;
|
||||
color:black;
|
||||
|
|
@ -144,9 +157,9 @@ input {
|
|||
}
|
||||
|
||||
.rangeChooser {
|
||||
width: 5vw;
|
||||
border: 0;
|
||||
display: block;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
margin:0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,6 @@
|
|||
|
||||
<div id="menu">
|
||||
<h2 id="toggleMenu" data-translation="waiting">Menu</h2>
|
||||
<br/>
|
||||
|
||||
<div id="menuItems">
|
||||
<h3 data-translation="waiting">Tools</h3>
|
||||
<ul id="tools" class="tools">
|
||||
|
|
@ -37,13 +35,40 @@
|
|||
</ul>
|
||||
|
||||
<h3 data-translation="waiting">Configuration</h3>
|
||||
<label for="chooseColor" data-translation="waiting">Color</label>
|
||||
<input type="color" id="chooseColor" value="#1913B0" />
|
||||
<br/>
|
||||
<label for="chooseSize" data-translation="waiting">Size</label>
|
||||
<input type="range" id="chooseSize" value="10" min="1" max="50" step="1" class="rangeChooser" />
|
||||
<label for="chooseOpacity" data-translation="waiting">Opacity</label>
|
||||
<input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1" class="rangeChooser" />
|
||||
<ul class="tools" id="settings">
|
||||
<li class="tool">
|
||||
<span class="tool-icon">
|
||||
<input type="color" id="chooseColor" value="#1913B0" />
|
||||
</span>
|
||||
<label class="tool-name" for="chooseColor" data-translation="waiting">Color</label>
|
||||
</li>
|
||||
<li class="tool">
|
||||
<span class="tool-icon">
|
||||
<svg viewBox="-60 -60 120 120"><circle id="sizeIndicator" cx=0 cy=0 r=10 /></svg>
|
||||
</span>
|
||||
<label class="tool-name slider" for="chooseSize">
|
||||
<span data-translation="waiting">Size</span>
|
||||
<input type="range" id="chooseSize" value="10" min="1" max="50" step="1" class="rangeChooser" />
|
||||
</label>
|
||||
</li>
|
||||
<li class="tool">
|
||||
<span class="tool-icon">
|
||||
<svg viewBox="0 0 12 12">
|
||||
<pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
|
||||
<rect x=0 y=0 width=2 height=2 fill=black />
|
||||
<rect x=2 y=2 width=2 height=2 fill=black />
|
||||
<rect x=2 y=0 width=2 height=2 fill=white />
|
||||
<rect x=0 y=2 width=2 height=2 fill=white />
|
||||
</pattern>
|
||||
<rect id="opacityIndicator" rx=1 width="100%" height="100%" fill="url(#opacityPattern)"/>
|
||||
</svg>
|
||||
</span>
|
||||
<label class="tool-name slider" for="chooseOpacity">
|
||||
<span data-translation="waiting">Opacity</span>
|
||||
<input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1" class="rangeChooser" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -405,20 +405,28 @@ Tools.getColor = (function color() {
|
|||
|
||||
Tools.getSize = (function size() {
|
||||
var chooser = document.getElementById("chooseSize");
|
||||
var sizeIndicator = document.getElementById("sizeIndicator");
|
||||
|
||||
function update() {
|
||||
if (chooser.value < 1 || chooser.value > 50) {
|
||||
chooser.value = 3;
|
||||
}
|
||||
chooser.value = Math.max(1, Math.min(50, chooser.value | 0));
|
||||
sizeIndicator.r.baseVal.value = chooser.value;
|
||||
}
|
||||
update();
|
||||
|
||||
chooser.onchange = update;
|
||||
chooser.onchange = chooser.oninput = update;
|
||||
return function () { return chooser.value; };
|
||||
})();
|
||||
|
||||
Tools.getOpacity = (function opacity() {
|
||||
var chooser = document.getElementById("chooseOpacity");
|
||||
var opacityIndicator = document.getElementById("opacityIndicator");
|
||||
|
||||
function update() {
|
||||
opacityIndicator.setAttribute("opacity", chooser.value);
|
||||
}
|
||||
update();
|
||||
|
||||
chooser.onchange = chooser.oninput = update;
|
||||
return function () {
|
||||
return Math.max(0.1, Math.min(1, chooser.value));
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
rect {
|
||||
#canvas rect {
|
||||
fill: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue