From c41fe7b11092a9fb5e82c46cd4bb6c477462bfdb Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 2 Jan 2017 18:49:13 +0000 Subject: [PATCH 1/4] close #63 --- _embed/public/css/styles.css | 108 ++++++++++++++++++++++++++++-- _embed/public/js/editor.js | 5 +- _embed/templates/frontmatter.tmpl | 2 +- 3 files changed, 105 insertions(+), 10 deletions(-) diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index ce506c42..079fa2d7 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -72,8 +72,6 @@ i.spin { * EDITOR * * * * * * * * * * * * * * * * */ -#editor {} - #editor .source { display: none; } @@ -107,19 +105,103 @@ i.spin { * * * * * * * * * * * * * * * */ .frontmatter { - -moz-column-count: 2; - -webkit-column-count: 2; - column-count: 2; + column-count: 3; + column-gap: 1em; + column-fill: balance; + /* display: flex; */ + /* flex-wrap: wrap; */ + /* justify-content: space-between; */ + /* flex-grow: 1; */ } .frontmatter label { display: block; + width: calc(100% - 1em); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .frontmatter label, .frontmatter h3 { font-weight: 500; - margin: .2em auto; + margin: 0 0; + color: rgba(0, 0, 0, 0.6); +} + +.frontmatter input, +.frontmatter textarea { + display: block; + width: 100%; + border: 0; + margin-top: .5em; + padding: 0; + line-height: 1; +} + +.frontmatter .block, +.frontmatter fieldset[data-type="array"], +.button { + position: relative; + background: #fff; + border-radius: .2em; + border: 1px solid rgba(0, 0, 0, 0.075); + padding: .5em; + break-inside: avoid; + margin: 0 0 1em; + width: 100%; + display: inline-block; +} + +.frontmatter .button { + background-color: #2196f3; + color: #fff; + cursor: pointer; + text-align: center; +} + +[data-type="array-item"] { + position: relative; +} + +[data-type="array-item"] .action { + top: 0; + right: 0; +} + +.frontmatter textarea { + resize: none; +} + +[data-type="array-item"] input { + width: calc(100% - 1em); +} + +.block .action, +fieldset .action { + position: absolute; + top: .5em; + right: .5em; +} + +.block>.action, +fieldset>.action { + opacity: 0; +} + +.block:hover>.action, +fieldset:hover>.action { + opacity: 1; +} + +.block .action.add, +fieldset .action.add { + right: 1.5em; +} + +.frontmatter .action i { + padding: 0; + font-size: 1em; } fieldset { @@ -130,6 +212,7 @@ fieldset { .frontmatter>fieldset h3, .frontmatter>.group h3 { font-size: 1.5em; + margin-bottom: .5em; } fieldset h3, @@ -471,7 +554,7 @@ header .actions { #bottom-bar>*:first-child { margin-right: auto; - max-width: calc(100% - 21em); + max-width: calc(100% - 24em); width: 100%; } @@ -638,6 +721,7 @@ header .actions { font-size: 3em; margin: 1em 0; display: block !important; + width: 95%; } @@ -965,6 +1049,12 @@ footer a:hover { * MEDIA QUERIES * * * * * * * * * * * * * * * * */ +@media screen and (max-width: 850px) { + .frontmatter { + column-count: 2; + } +} + @media screen and (max-width: 650px) { body { transition: .2s ease padding; @@ -999,6 +1089,7 @@ footer a:hover { #main-actions .action { padding: .7em; border-radius: 0; + align-items: center; } #main-actions .action:hover { background-color: rgba(0, 0, 0, 0.04); @@ -1023,6 +1114,9 @@ footer a:hover { #listing.list .item .name { width: 100%; } + .frontmatter { + column-count: 1; + } } @media screen and (max-width: 450px) { diff --git a/_embed/public/js/editor.js b/_embed/public/js/editor.js index ac25d271..fc539b5d 100644 --- a/_embed/public/js/editor.js +++ b/_embed/public/js/editor.js @@ -4,8 +4,9 @@ var editor = {}; editor.textareaAutoGrow = function() { let autogrow = function() { - this.style.height = '5px'; - this.style.height = this.scrollHeight + 'px'; + console.log(this.style.height) + this.style.height = 'auto'; + this.style.height = (this.scrollHeight) + 'px'; } let textareas = document.getElementsByTagName('textarea'); diff --git a/_embed/templates/frontmatter.tmpl b/_embed/templates/frontmatter.tmpl index 3f7fe91d..3389da90 100644 --- a/_embed/templates/frontmatter.tmpl +++ b/_embed/templates/frontmatter.tmpl @@ -43,7 +43,7 @@ {{ define "fielset" }}
{{- if not (eq .Title "") }} -

{{ .Title }}

+

{{ .Name }}

{{- end }}
add From 6b9d5bca43a4e18af638af9453255170dbe06adf Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 2 Jan 2017 18:52:51 +0000 Subject: [PATCH 2/4] updates on #63 --- _embed/public/css/styles.css | 5 +++++ _embed/public/js/editor.js | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index 079fa2d7..150ee9b2 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -153,6 +153,11 @@ i.spin { display: inline-block; } +.frontmatter fieldset[data-type="object"] { + position: relative; + margin: 0; +} + .frontmatter .button { background-color: #2196f3; color: #fff; diff --git a/_embed/public/js/editor.js b/_embed/public/js/editor.js index fc539b5d..07ba76b9 100644 --- a/_embed/public/js/editor.js +++ b/_embed/public/js/editor.js @@ -98,11 +98,11 @@ function addFrontMatterItemPrompt(parent) { if (type == "array" || type == "object") { if (parent.dataset.type == "parent") { - makeFromBaseTemplate(bid, newtype, name, document.querySelector('.frontmatter')); + makeFromBaseTemplate(id, type, name, document.querySelector('.frontmatter')); return; } - makeFromBaseTemplate(bid, newtype, name, block); + makeFromBaseTemplate(id, type, name, block); return; } From 8c76980725c6306fce5794cb54e37672bae17637 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 2 Jan 2017 19:55:21 +0000 Subject: [PATCH 3/4] fix #65 --- _embed/public/css/styles.css | 16 ++++++++++++++-- _embed/templates/single.tmpl | 4 ++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index 150ee9b2..94bc031e 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -23,6 +23,11 @@ img { max-width: 100%; } +audio, +video { + width: 100%; +} + pre { padding: 1em; border: 1px solid #e6e6e6; @@ -721,12 +726,19 @@ header .actions { vertical-align: bottom; } -#listing .message { +.message { text-align: center; font-size: 3em; - margin: 1em 0; + margin: 1em auto; display: block !important; width: 95%; + color: rgba(0, 0, 0, 0.2); + font-weight: 500; +} + +.message i { + font-size: inherit; + vertical-align: middle; } diff --git a/_embed/templates/single.tmpl b/_embed/templates/single.tmpl index b22bb7a5..46ac9292 100644 --- a/_embed/templates/single.tmpl +++ b/_embed/templates/single.tmpl @@ -2,7 +2,7 @@ {{ with .Data}}
{{ if eq .Type "image" }} - +
{{ else if eq .Type "audio" }} {{ else if eq .Type "video" }} @@ -12,7 +12,7 @@ and watch it with your favorite video player! {{ else if eq .Type "blob" }} - Download +

Download file_download

 {{ else}} 
{{ .StringifyContent }}
{{ end }} From cb77ca979b94519ce5afc5ea25e33cd44732e1d8 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 2 Jan 2017 19:57:06 +0000 Subject: [PATCH 4/4] fix css bug --- _embed/public/css/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index 94bc031e..989040be 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -726,6 +726,7 @@ header .actions { vertical-align: bottom; } +#listing h2.message, .message { text-align: center; font-size: 3em;