mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 18:46:19 +02:00
Code Issues Releases Wiki Activity

theming & ainmation.

Browse Source
This commit is contained in:
Kushagra Gour
2016-12-03 04:25:19 +05:30
parent 9903412799
commit 0c657f2064
2 changed files with 82 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/index.html
View File

@ -14,12 +14,15 @@
src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype'); src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
} }
:root {
--color-bg: #252637;
--color-sidebar: #3A2B63;
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
background: #444; background: var(--color-bg);
color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9);
min-height: 100vh; min-height: 100vh;
font-family: Helvetica, arial; font-family: Helvetica, arial;
@ -53,7 +56,7 @@
border-top-color: currentColor; border-top-color: currentColor;
position: relative; position: relative;
top: 5px; top: 5px;
margin-left: 7px; margin-left: 8px;
} }
a > svg { a > svg {
fill: rgba(255, 255, 255, 0.2) fill: rgba(255, 255, 255, 0.2)
@ -121,7 +124,7 @@
height: 33%; height: 33%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #272822; background: var(--color-bg);
transition: height 0.30s ease, width 0.30s ease; transition: height 0.30s ease, width 0.30s ease;
will-change: height; will-change: height;
/*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/ /*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/
@ -151,11 +154,18 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 5px 10px; padding: 5px 10px;
background: rgba(0,0,0,0.25); background: rgba(0,0,0,0.20);
color: #888; color: #888;
border-bottom: 1px solid rgba(0,0,0,0.3); border-bottom: 1px solid rgba(0,0,0,0.3);
font-weight: bold; font-weight: bold;
} }
.code-wrap__header-label {
/*transform: translate(0px) scale(1.2);*/
display: inline-block;
font-size: 1.3em;
opacity: 0.5;
/*transform-origin: left center;*/
}
.layout-2 .is-minimized .code-wrap__header { .layout-2 .is-minimized .code-wrap__header {
writing-mode: vertical-lr; writing-mode: vertical-lr;
padding: 10px 5px; padding: 10px 5px;
@ -194,6 +204,10 @@
.cm-s-monokai .CodeMirror-linenumber { .cm-s-monokai .CodeMirror-linenumber {
color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.2);
} }
.cm-s-monokai.CodeMirror,
.cm-s-monokai .CodeMirror-gutters {
background: var(--color-bg);
}
#demo-frame { #demo-frame {
border: 0; border: 0;
@ -206,7 +220,7 @@
.main-header, .main-header,
.footer { .footer {
padding: 5px 10px; padding: 5px 10px;
background-color: #111; background-color: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
border-top: 1px solid rgba(255,255,255,0.14); border-top: 1px solid rgba(255,255,255,0.14);
line-height: 20px; line-height: 20px;
@ -271,7 +285,7 @@
fill: rgba(255, 255, 255, 0.45); fill: rgba(255, 255, 255, 0.45);
} }
.gutter { .gutter {
background: rgba(0,0,0,0.2); background: rgba(255, 255, 255, 0.05);
flex-shrink: 0; flex-shrink: 0;
} }
.gutter-horizontal { .gutter-horizontal {
@ -283,7 +297,7 @@
.item-title-input { .item-title-input {
background: none; background: none;
border: 0; border: 0;
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.6);
width: calc(100vw - 400px); width: calc(100vw - 400px);
} }
.modal { .modal {
@ -340,12 +354,13 @@
width: 400px; width: 400px;
padding: 20px 30px; padding: 20px 30px;
z-index: 6; z-index: 6;
background-color: #272822; background-color: var(--color-sidebar);
transition: 0.3s ease; transition: 0.3s cubic-bezier(1, 0.13, 0.21, 0.87);
will-change: transform; will-change: transform;
transform: translateX(100%); transform: translateX(100%);
} }
.saved-items-pane.is-open { .saved-items-pane.is-open {
transition-duration: 0.45s;
transform: translateX(0); transform: translateX(0);
} }
.is-modal-visible ~ .modal-overlay, .is-modal-visible ~ .modal-overlay,
@ -370,23 +385,64 @@
} }
.saved-item-tile { .saved-item-tile {
padding: 20px; padding: 20px;
background-color: #2f302b; background-color: rgba(255, 255, 255, 0.06);
position: relative; position: relative;
/*border: 1px solid rgba(255,255,255,0.1);*/ /*border: 1px solid rgba(255,255,255,0.1);*/
margin: 20px 0; margin: 20px 0;
display: block; display: block;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
opacity: 0;
transform: translateX(50px);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
animation: slide-left 0.35s ease forwards;
}
.saved-item-tile:nth-child(1) { animation-delay: 0.1s; }
.saved-item-tile:nth-child(2) { animation-delay: 0.2s; }
.saved-item-tile:nth-child(3) { animation-delay: 0.3s; }
.saved-item-tile:nth-child(4) { animation-delay: 0.4s; }
.saved-item-tile:nth-child(5) { animation-delay: 0.5s; }
.saved-item-tile:nth-child(6) { animation-delay: 0.6s; }
.saved-item-tile:nth-child(7) { animation-delay: 0.7s; }
.saved-item-tile:nth-child(9) { animation-delay: 0.8s; }
.saved-item-tile:nth-child(10) { animation-delay: 0.9s; }
.saved-item-tile:nth-child(11) { animation-delay: 1s; }
.saved-item-tile:nth-child(12) { animation-delay: 1.1s; }
.saved-item-tile:nth-child(13) { animation-delay: 1.2s; }
@keyframes slide-left {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
} }
.saved-item-tile:hover { .saved-item-tile:hover {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
} }
.saved-item-tile__close-btn { .saved-item-tile__close-btn {
padding: 20px; padding: 7px 10px;
position: absolute; position: absolute;
right: -5px; right: 8px;
top: -5px; top: 6px;
color: rgba(255,255,255,0.3);
border-radius: 50%;
background: rgba(255,255,255,0.05);
}
.saved-item-tile__close-btn:hover {
background: rgba(255,255,255,0.8);
color: #555;
}
.saved-item-tile__title {
font-size: 1.6em;
margin: 0 0 1em 0;
opacity: 0.8;
}
.saved-item-tile__meta {
opacity: 0.3;
} }
.saved-items-pane__container { .saved-items-pane__container {
overflow-y: scroll; overflow-y: scroll;
@ -477,7 +533,7 @@
cursor: pointer; cursor: pointer;
} }
.dropdown__menu > li > a:hover { .dropdown__menu > li > a:hover {
background: #ff8c00; background: var(--color-sidebar);
color: white; color: white;
} }
.dropdown__menu > li:not(:last-child) { .dropdown__menu > li:not(:last-child) {
@ -495,7 +551,7 @@
left: 50%; left: 50%;
top: 0; top: 0;
padding: 10px; padding: 10px;
background: #9f3b4e; background: var(--color-sidebar);
border-radius: 3px; border-radius: 3px;
z-index: 6; z-index: 6;
transform: translateY(-100%); transform: translateY(-100%);
@ -576,7 +632,7 @@
<div id="js-html-code" data-type="html" class="code-wrap"> <div id="js-html-code" data-type="html" class="code-wrap">
<div class="code-wrap__header"> <div class="code-wrap__header">
<div class="btn-group" dropdown title="Click to change"> <div class="btn-group" dropdown title="Click to change">
<span id="js-html-mode-label">HTML</span><span class="caret"></span> <span id="js-html-mode-label" class="code-wrap__header-label">HTML</span><span class="caret"></span>
<ul class="js-modes-menu dropdown__menu"> <ul class="js-modes-menu dropdown__menu">
<li><a data-type="html" data-mode="html">HTML</a></li> <li><a data-type="html" data-mode="html">HTML</a></li>
<li><a data-type="html" data-mode="markdown">Markdown</a></li> <li><a data-type="html" data-mode="markdown">Markdown</a></li>
@ -592,7 +648,7 @@
<div id="js-css-code" data-type="css" class="code-wrap"> <div id="js-css-code" data-type="css" class="code-wrap">
<div class="code-wrap__header"> <div class="code-wrap__header">
<div class="btn-group" dropdown title="Click to change"> <div class="btn-group" dropdown title="Click to change">
<span id="js-css-mode-label">CSS</span><span class="caret"></span> <span id="js-css-mode-label" class="code-wrap__header-label">CSS</span><span class="caret"></span>
<ul class="js-modes-menu dropdown__menu"> <ul class="js-modes-menu dropdown__menu">
<li><a data-type="css" data-mode="css">CSS</a></li> <li><a data-type="css" data-mode="css">CSS</a></li>
<li><a data-type="css" data-mode="scss">SCSS</a></li> <li><a data-type="css" data-mode="scss">SCSS</a></li>
@ -608,7 +664,7 @@
<div id="js-js-code" data-type="js" class="code-wrap"> <div id="js-js-code" data-type="js" class="code-wrap">
<div class="code-wrap__header"> <div class="code-wrap__header">
<div class="btn-group" dropdown title="Click to change"> <div class="btn-group" dropdown title="Click to change">
<span id="js-js-mode-label">JS</span><span class="caret"></span> <span id="js-js-mode-label" class="code-wrap__header-label">JS</span><span class="caret"></span>
<ul class="js-modes-menu dropdown__menu"> <ul class="js-modes-menu dropdown__menu">
<li><a data-type="js" data-mode="js">JS</a></li> <li><a data-type="js" data-mode="js">JS</a></li>
<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li> <li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>

10
src/script.js
View File

@ -235,14 +235,16 @@
}); });
items.forEach(function (item) { items.forEach(function (item) {
html += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">' html += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">'
+ '<a class="js-saved-item-tile__close-btn saved-item-tile__close-btn">X</a>' + '<a class="js-saved-item-tile__close-btn saved-item-tile__close-btn hint--left" aria-label="Remove">X</a>'
+ '<h3>' + item.title + '</h3><span>Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>'; + '<h3 class="saved-item-tile__title">' + item.title + '</h3><span class="saved-item-tile__meta">Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>';
}); });
} else { } else {
html += 'Nothing saved here.' html += 'Nothing saved here.'
} }
savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html; savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html;
toggleSavedItemsPane(); toggleSavedItemsPane();
// HACK: Set overflow after sometime so that the items can animate without getting cropped.
// setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000);
} }
function toggleSavedItemsPane(shouldOpen) { function toggleSavedItemsPane(shouldOpen) {
@ -697,7 +699,9 @@
utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane); utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane);
utils.onButtonClick(savedItemsPane, function (e) { utils.onButtonClick(savedItemsPane, function (e) {
if (e.target.classList.contains('js-saved-item-tile')) { if (e.target.classList.contains('js-saved-item-tile')) {
openItem(e.target.dataset.itemId); setTimeout(function () {
openItem(e.target.dataset.itemId);
}, 300);
toggleSavedItemsPane(); toggleSavedItemsPane();
} }
if (e.target.classList.contains('js-saved-item-tile__close-btn')) { if (e.target.classList.contains('js-saved-item-tile__close-btn')) {