style updates

This commit is contained in:
Henrique Dias 2016-02-03 22:33:03 +00:00
parent ba44593365
commit 2e39792400
7 changed files with 103 additions and 93 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,15 @@
body {
font-family: 'Roboto', sans-serif;
color: #212121;
background-color: #f5f5f5;
height: 100%;
width: 100%;
padding-top: 3em;
}
a {
text-decoration: none;
color: #1976D2;
}
code {
@ -12,28 +19,15 @@ code {
img {
max-width: 100%;
}
#content {
padding-top: 3em;
}
h2 {
margin: .83em 0;
}
header {
color: #fff;
background-color: #37474f;
padding: .67em 0;
}
header h1 {
margin: 0;
}
.container {
margin: 0 auto;
width: 95%;
max-width: 800px;
max-width: 1000px;
}
.hidden {
@ -62,13 +56,13 @@ body > nav {
box-sizing: border-box;
z-index: 999;
color: #eee;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
body > nav ul {
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
@ -94,6 +88,7 @@ body > nav ul li a {
display: block;
text-decoration: none;
color: inherit;
-webkit-transition: .5s ease background-color;
transition: .5s ease background-color;
}
@ -101,12 +96,14 @@ body > nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.57);
}
/* FOOTER */
body > footer {
background-color: #CFD8DC;
background-color: #ddd;
text-align: center;
padding: 1em 0;
margin-top: 1em;
}
body > footer p {
@ -195,29 +192,22 @@ body > footer p {
}
/* EDITOR */
/* EDITOR : BUTTONS */
button, input[type="submit"] {
button,
input[type="submit"] {
border-radius: 0.2em;
border: 0;
padding: .5em 1em;
color: #fff;
font-weight: normal;
background-color: #ddd;
background-color: #2196F3;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
}
.editor h1 textarea {
width: 100%;
border: 0;
font-size: 2em;
font-weight: 400;
resize: none;
overflow: hidden;
line-height: 1em;
height: 1em;
}
button.add, button.delete, button.rename {
button.add,
button.delete,
button.rename {
padding: 0.063em 0.375em;
}
@ -225,6 +215,14 @@ button.add {
background-color: #8BC34A;
}
button.delete {
background-color: #F44336;
}
button.rename {
background-color: #1565C0;
}
.frontmatter > .actions {
margin-top: 0;
text-align: right;
@ -234,12 +232,24 @@ button.add {
padding: .5em 1em;
}
button.delete {
background-color: #F44336;
.toolbar .right {
float: right;
}
button.rename {
background-color: #1565C0;
.toolbar .default {
background-color: #8BC34A;
}
.editor h1 textarea {
width: 100%;
border: 0;
font-size: 2em;
font-weight: 400;
resize: none;
overflow: hidden;
line-height: 1em;
height: 1em;
background-color: transparent;
}
.block > .actions,
@ -250,18 +260,19 @@ fieldset > .actions {
}
.blocks {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
.block,
fieldset {
display: inline-block;
background-color: #EAEAEA;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
background-color: #fff;
padding: 0.6em;
box-sizing: border-box;
margin: 0 0 1em;
@ -281,9 +292,11 @@ fieldset h3 {
.block textarea {
width: 100%;
background-color: transparent;
resize: vertical;
background-color: inherit;
border: 0;
overflow: hidden;
}
.block input,
@ -321,6 +334,7 @@ fieldset input {
.ace_editor {
margin: 0;
border-radius: .5em;
}
.ace_gutter {
@ -347,6 +361,9 @@ fieldset input {
.browse .actions .container {
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

View File

@ -1 +1 @@
.noty_icon,body>nav{left:0;box-sizing:border-box}.block,.noty_icon,.noty_text,body>nav,fieldset{box-sizing:border-box}.browse .actions .fa,body>nav ul li{vertical-align:middle}body{font-family:Roboto,sans-serif;color:#212121;height:100%;width:100%}code{border-radius:.2em}img{max-width:100%}#content{padding-top:3em}h2{margin:.83em 0}header{color:#fff;background-color:#37474f;padding:.67em 0}header h1{margin:0}.container{margin:0 auto;width:95%;max-width:800px}.hidden{display:none}.left{text-align:left}.right{text-align:right}body>nav{position:fixed;top:0;height:3em;width:100%;background-color:#2196F3;padding:0 1em;z-index:999;color:#eee}body>nav ul{margin:0;padding:0;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}body>nav ul li{list-style-type:none;display:inline-block}body>nav ul li:last-child{margin-left:auto}body>nav img{height:2em}body>nav ul li a{padding:.5em;line-height:2em;display:block;text-decoration:none;color:inherit;transition:.5s ease background-color}body>nav ul li a:hover{background-color:rgba(255,255,255,.57)}body>footer{background-color:#CFD8DC;text-align:center;padding:1em 0}body>footer p{width:95%;max-width:1000px;margin:0 auto;color:#78909C;font-size:.9em}#noty_topRight_layout_container{font-family:sans-serif;top:4em!important;right:1em!important;position:fixed!important;width:310px;height:auto;margin:0;padding:0;list-style-type:none;z-index:10000000}#noty_topRight_layout_container li{overflow:hidden;margin:0 0 .25em}.noty_bar{color:#fff;background-color:#cfd8dc;border-radius:.3em}.noty_message{font-size:.75em;font-weight:700;line-height:1.2em;text-align:left;padding:1em;width:auto;position:relative}.noty_text{display:block;margin-left:3em;top:1em}.noty_icon{position:absolute;top:0;height:100%;padding:1em;background-color:rgba(0,0,0,.1);border-top-left-radius:.3em;border-bottom-left-radius:.3em;text-align:center}.noty_icon .fa{width:1em!important}.noty_type_success{background-color:#00c853}.noty_type_error{background-color:#ff5252}.noty_type_warning{background-color:#ffd600}.noty_type_information{background-color:#448aff}button,input[type=submit]{border-radius:.2em;border:0;padding:.5em 1em;color:#fff;font-weight:400;background-color:#ddd}.editor h1 textarea{width:100%;border:0;font-size:2em;font-weight:400;resize:none;overflow:hidden;line-height:1em;height:1em}button.add,button.delete,button.rename{padding:.063em .375em}button.add{background-color:#8BC34A}.frontmatter>.actions{margin-top:0;text-align:right}.frontmatter>.actions button.add{padding:.5em 1em}button.delete{background-color:#F44336}button.rename{background-color:#1565C0}.block>.actions,fieldset>.actions{position:absolute;top:.5em;right:.5em}.blocks{-moz-column-count:2;-webkit-column-count:2;column-count:2;-moz-column-gap:1em;-webkit-column-gap:1em;column-gap:1em}.block,fieldset{display:inline-block;background-color:#EAEAEA;padding:.6em;margin:0 0 1em;position:relative;width:100%;border:0}.block label,fieldset h3,fieldset label{font-weight:700;display:block;margin-top:0;font-size:1em}.block textarea{width:100%;resize:vertical;background-color:inherit;border:0}.block input,fieldset input{border:0;outline:0;background-color:transparent;width:100%}fieldset input{width:calc(100% - 1.57em);margin:.5em 0}.editor.complete .block[data-content=title]{display:none}.editor .content{border-radius:.5em;border:1px solid #d8d8d8;background-color:#f7f7f7}.editor .content nav a{padding:1em;line-height:3em;cursor:pointer;font-size:1em}.ace_editor{margin:0}.ace_gutter{background-color:#f7f7f7!important}.browse a{color:inherit;text-decoration:none}.browse table{width:100%}.browse .actions{background-color:#455a64;color:#fff;padding:1.5em 0}.browse .actions .container{margin:0 auto;display:flex}.browse .actions .go-right{margin-left:auto;position:relative}.browse tr{line-height:2em;border-bottom:1px solid rgba(0,0,0,.03)}.browse #new-file{display:none;position:absolute;right:0;top:2.5em;background-color:#263238;color:rgba(255,255,255,.5);border-radius:.5em;padding:1em;width:182%}
.noty_icon,body>nav{left:0;box-sizing:border-box}.block,.noty_icon,.noty_text,body>nav,fieldset{box-sizing:border-box}.browse a,a,body>nav ul li a{text-decoration:none}.browse .actions .fa,body>nav ul li{vertical-align:middle}body{font-family:Roboto,sans-serif;color:#212121;background-color:#f5f5f5;height:100%;width:100%;padding-top:3em}a{color:#1976D2}code{border-radius:.2em}img{max-width:100%}h2{margin:.83em 0}.container{margin:0 auto;width:95%;max-width:1000px}.hidden{display:none}.left{text-align:left}.right{text-align:right}body>nav{position:fixed;top:0;height:3em;width:100%;background-color:#2196F3;padding:0 1em;z-index:999;color:#eee;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}body>nav ul{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}body>nav ul li{list-style-type:none;display:inline-block}body>nav ul li:last-child{margin-left:auto}body>nav img{height:2em}body>nav ul li a{padding:.5em;line-height:2em;display:block;color:inherit;-webkit-transition:.5s ease background-color;transition:.5s ease background-color}body>nav ul li a:hover{background-color:rgba(255,255,255,.57)}body>footer{background-color:#ddd;text-align:center;padding:1em 0;margin-top:1em}body>footer p{width:95%;max-width:1000px;margin:0 auto;color:#78909C;font-size:.9em}#noty_topRight_layout_container{font-family:sans-serif;top:4em!important;right:1em!important;position:fixed!important;width:310px;height:auto;margin:0;padding:0;list-style-type:none;z-index:10000000}#noty_topRight_layout_container li{overflow:hidden;margin:0 0 .25em}.noty_bar{color:#fff;background-color:#cfd8dc;border-radius:.3em}.noty_message{font-size:.75em;font-weight:700;line-height:1.2em;text-align:left;padding:1em;width:auto;position:relative}.noty_text{display:block;margin-left:3em;top:1em}.noty_icon{position:absolute;top:0;height:100%;padding:1em;background-color:rgba(0,0,0,.1);border-top-left-radius:.3em;border-bottom-left-radius:.3em;text-align:center}.noty_icon .fa{width:1em!important}.noty_type_success{background-color:#00c853}.noty_type_error{background-color:#ff5252}.noty_type_warning{background-color:#ffd600}.noty_type_information{background-color:#448aff}button,input[type=submit]{border-radius:.2em;border:0;padding:.5em 1em;color:#fff;font-weight:400;background-color:#2196F3;box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.12)}button.add,button.delete,button.rename{padding:.063em .375em}button.add{background-color:#8BC34A}button.delete{background-color:#F44336}button.rename{background-color:#1565C0}.frontmatter>.actions{margin-top:0;text-align:right}.frontmatter>.actions button.add{padding:.5em 1em}.toolbar .right{float:right}.toolbar .default{background-color:#8BC34A}.editor h1 textarea{width:100%;border:0;font-size:2em;font-weight:400;resize:none;overflow:hidden;line-height:1em;height:1em;background-color:transparent}.block>.actions,fieldset>.actions{position:absolute;top:.5em;right:.5em}.blocks{-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em}.block,fieldset{display:inline-block;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);background-color:#fff;padding:.6em;margin:0 0 1em;position:relative;width:100%;border:0}.block label,fieldset h3,fieldset label{font-weight:700;display:block;margin-top:0;font-size:1em}.block textarea{width:100%;resize:vertical;background-color:inherit;border:0;overflow:hidden}.block input,fieldset input{border:0;outline:0;background-color:transparent;width:100%}fieldset input{width:calc(100% - 1.57em);margin:.5em 0}.editor.complete .block[data-content=title]{display:none}.editor .content{border-radius:.5em;border:1px solid #d8d8d8;background-color:#f7f7f7}.editor .content nav a{padding:1em;line-height:3em;cursor:pointer;font-size:1em}.ace_editor{margin:0;border-radius:.5em}.ace_gutter{background-color:#f7f7f7!important}.browse a{color:inherit}.browse table{width:100%}.browse .actions{background-color:#455a64;color:#fff;padding:1.5em 0}.browse .actions .container{margin:0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.browse .actions .go-right{margin-left:auto;position:relative}.browse tr{line-height:2em;border-bottom:1px solid rgba(0,0,0,.03)}.browse #new-file{display:none;position:absolute;right:0;top:2.5em;background-color:#263238;color:rgba(255,255,255,.5);border-radius:.5em;padding:1em;width:182%}

View File

@ -1,4 +1,5 @@
$(document).ready(function() {
// Start pjax
$(document).pjax('a[data-pjax]', '#content');
});
@ -200,8 +201,9 @@ $(document).on('ready pjax:success', function() {
// If it's editor page
if ($(".editor")[0]) {
var mode = $("#source-area").data('mode');
var editor = ace.edit("source-area");
editor.getSession().setMode("ace/mode/markdown");
editor.getSession().setMode("ace/mode/" + mode);
editor.setOptions({
wrap: true,
maxLines: Infinity,
@ -222,6 +224,7 @@ $(document).on('ready pjax:success', function() {
}
});
//TODO: reform this
// Submites any form in the page in JSON format
$('form').submit(function(event) {
event.preventDefault();

View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fff">
<meta name="theme-color" content="#2196F3">
<title>{{ if Defined . "Name" }}{{ .Name }}{{ end }}</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
@ -21,7 +21,7 @@
<body>
<nav>
<ul>
<ul class="container">
<li><a href="/"><i class="fa fa-home fa-lg"></i> Go to website</a></li>
<li><a data-pjax href="/admin/browse/content/"><i class="fa fa-newspaper-o"></i> Content</a></li>
<li><a data-pjax href="/admin/browse/"><i class="fa fa-folder-o"></i> Browse</a></li>

View File

@ -1,61 +1,51 @@
{{ define "content" }}
<div class="editor {{ .Class }}">
<div class="editor {{ .Class }} container">
<form method="POST" action="">
<div class="container">
<main>
{{ if not (eq .Class "complete") }}
<h1>{{ .Name }}{{ if eq .Class "frontmatter-only" }}
<span class="actions">
<button class="add">&#43;</button>
</span>{{ end }}
</h1>
<main>
{{ if not (eq .Class "complete") }}
<h1>{{ .Name }}</h1>
{{ end }}
{{ end }} {{ if eq .Class "frontmatter-only" }}
<div class="frontmatter blocks">
{{ template "frontmatter" .FrontMatter }}
</div>
{{ else if eq .Class "content-only" }}
<textarea id="content-area" name="content" class="scroll" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
<div id="preview-area" class="scroll hidden"></div>
{{ else }}
<div class="frontmatter">
<h1><textarea>{{ .Name }}</textarea></h1>
{{ if eq .Class "frontmatter-only" }}
<div class="frontmatter blocks">
{{ template "frontmatter" .FrontMatter }}
</div>
{{ else if eq .Class "content-only" }}
<div class="content">
<textarea id="source-area" name="content" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
</div>
{{ else }}
<div class="frontmatter">
<h1><textarea>{{ .Name }}</textarea></h1>
<div class="blocks">
{{ template "frontmatter" .FrontMatter }}
</div>
<p class="actions">
<button class="add">Add field</button>
</p>
<div class="blocks">
{{ template "frontmatter" .FrontMatter }}
</div>
<div class="content">
<nav>
<a id="see-source"><i class="fa fa-code"></i> Source</a>
<a id="see-preview"><i class="fa fa-eye"></i> Preview</a>
</nav>
<textarea id="source-area" name="content" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
<div id="preview-area"></div>
</div>
<p class="actions">
<button class="add">Add field</button>
</p>
</div>
{{ end }}
</main>
<div class="content">
<nav>
<a id="see-source"><i class="fa fa-code"></i> Source</a>
<a id="see-preview"><i class="fa fa-eye"></i> Preview</a>
</nav>
<textarea id="source-area" name="content" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
<div id="preview-area"></div>
</div>
{{ end }}
<p class="toolbar">
{{ if or (eq .Mode "markdown") (eq .Class "complete") }}
<button id="preview" class="left">Preview</button>
{{ else }}
<span class="left"></span>
{{ end }}
<input type="submit" data-type="{{ .Class }}" data-message="{{ if eq .Class "frontmatter-only" }}The fields were put on their way.{{ else if eq .Class "content-only" }}Every byte was saved.{{ else }}Post saved with pomp and circumstance.{{ end }}"
data-regenerate="false" value="Save"> {{ if and (eq .Class "complete") ( .IsPost ) }}
<input type="submit" data-type="{{ .Class }}" data-message="Post scheduled." data-schedule="true" value="Schedule"> {{ end }}
<input type="submit" data-type="{{ .Class }}" data-message="{{ if eq .Class "frontmatter-only" }}Saved and regenerated.{{ else if eq .Class "content-only" }}Done. What do you want more?{{ else }}Post published. Go and share it!{{ end }}" data-regenerate="true"
class="default" value="Publish">
<input type="submit" data-type="{{ .Class }}" data-message="{{ if eq .Class "frontmatter-only" }}The fields were put on their way.{{ else if eq .Class "content-only" }}Every byte was saved.{{ else }}Post saved with pomp and circumstance.{{ end }}" data-regenerate="false" value="Save">
<span class="right">
{{ if and (eq .Class "complete") ( .IsPost ) }}<input type="submit" data-type="{{ .Class }}" data-message="Post scheduled." data-schedule="true" value="Schedule"> {{ end }}
<input type="submit" data-type="{{ .Class }}" data-message="{{ if eq .Class "frontmatter-only" }}Saved and regenerated.{{ else if eq .Class "content-only" }}Done. What do you want more?{{ else }}Post published. Go and share it!{{ end }}" data-regenerate="true" class="default" value="Publish">
</span>
</p>
</div>
</main>
</form>
</div>
{{ end }}