chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

improve design on mobile

This commit is contained in:
Henrique Dias 2015-09-20 11:03:17 +01:00
parent 125666b5c5
commit 6453713253
7 changed files with 130 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
assets/src/js/app.js
View File

@ -1,5 +1,5 @@
$(document).ready(function() { $(document).ready(function() {
$(document).pjax('a', '#content'); $(document).pjax('a[data-pjax]', '#content');
}); });
$(document).on('ready pjax:success', function() { $(document).on('ready pjax:success', function() {
@ -197,12 +197,4 @@ $(document).on('ready pjax:success', function() {
} }
}); });
} }
});
$(document).on('pjax:send', function() {
$('#loading').fadeIn();
});
$(document).on('pjax:complete', function() {
$('#loading').fadeOut();
}); });

63
assets/src/sass/_editor.scss
View File

@ -139,15 +139,68 @@ input:-ms-input-placeholder {
width : 75%; width : 75%;
max-width: none; max-width: none;
height : calc(100% - 6em); height : calc(100% - 6em);
margin : 1.5em auto; margin : 0;
} }
.editor.complete .toolbar { .editor.complete .toolbar {
width: 75%; width: 75%;
} }
.editor.complete .cm-s-mdn-like.CodeMirror { .editor.complete .CodeMirror {
width : auto; width : auto;
margin: 0 10%; margin : 1.5em 10%;
height: calc(100% - 3em); height : calc(100% - 3em);
box-sizing: border-box;
}
@media screen and (max-width: 1000px) {
.editor.complete .frontmatter {
width: 35%;
}
.editor.complete .container {
width: 65%;
}
.editor.complete .toolbar {
width: 65%;
}
.hideable {
display: none;
}
}
@media screen and (max-width: 800px) {
.editor.complete .frontmatter,
.editor.complete .container {
position: static;
width : 100%;
display : block;
top : 0;
height : auto;
}
.editor.complete .full {
height: calc(100% - 6em);
}
.editor.complete .toolbar {
width: 100%;
}
.editor.complete #preview-area {
padding: 1.5em 1em;
}
.editor.complete .CodeMirror {
margin: 1.5em 1em;
}
}
@media screen and (max-width: 530px) {
nav {
overflow : hidden;
text-align: center;
}
} }

117
assets/src/sass/_scrollbar.scss
View File

@ -1,11 +1,11 @@
/* perfect-scrollbar v0.6.5 */ /* perfect-scrollbar v0.6.5 */
.ps-container { .ps-container {
-ms-touch-action: none; -ms-touch-action: none;
overflow: hidden !important; overflow : hidden !important;
} }
.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { .ps-container.ps-active-x > .ps-scrollbar-x-rail,
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
display: block; display: block;
} }
@ -15,7 +15,7 @@
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity : .9;
} }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
@ -24,7 +24,7 @@
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity : .9;
} }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
@ -32,73 +32,73 @@
} }
.ps-container > .ps-scrollbar-x-rail { .ps-container > .ps-scrollbar-x-rail {
display: none; display : none;
position: absolute; position : absolute;
/* please don't change 'position' */ /* please don't change 'position' */
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius : 4px;
-ms-border-radius: 4px; -ms-border-radius : 4px;
border-radius: 4px; border-radius : 4px;
opacity: 0; opacity : 0;
-webkit-transition: background-color .2s linear, opacity .2s linear; -webkit-transition : background-color .2s linear, opacity .2s linear;
-moz-transition: background-color .2s linear, opacity .2s linear; -moz-transition : background-color .2s linear, opacity .2s linear;
-o-transition: background-color .2s linear, opacity .2s linear; -o-transition : background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear; transition : background-color .2s linear, opacity .2s linear;
bottom: 3px; bottom : 3px;
/* there must be 'bottom' for ps-scrollbar-x-rail */ /* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px; height : 8px;
} }
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute; position : absolute;
/* please don't change 'position' */ /* please don't change 'position' */
background-color: #aaa; background-color : #aaa;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius : 4px;
-ms-border-radius: 4px; -ms-border-radius : 4px;
border-radius: 4px; border-radius : 4px;
-webkit-transition: background-color .2s linear; -webkit-transition : background-color .2s linear;
-moz-transition: background-color .2s linear; -moz-transition : background-color .2s linear;
-o-transition: background-color .2s linear; -o-transition : background-color .2s linear;
transition: background-color .2s linear; transition : background-color .2s linear;
bottom: 0; bottom : 0;
/* there must be 'bottom' for ps-scrollbar-x */ /* there must be 'bottom' for ps-scrollbar-x */
height: 8px; height : 8px;
} }
.ps-container > .ps-scrollbar-y-rail { .ps-container > .ps-scrollbar-y-rail {
display: none; display : none;
position: absolute; position : absolute;
/* please don't change 'position' */ /* please don't change 'position' */
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius : 4px;
-ms-border-radius: 4px; -ms-border-radius : 4px;
border-radius: 4px; border-radius : 4px;
opacity: 0; opacity : 0;
-webkit-transition: background-color .2s linear, opacity .2s linear; -webkit-transition : background-color .2s linear, opacity .2s linear;
-moz-transition: background-color .2s linear, opacity .2s linear; -moz-transition : background-color .2s linear, opacity .2s linear;
-o-transition: background-color .2s linear, opacity .2s linear; -o-transition : background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear; transition : background-color .2s linear, opacity .2s linear;
right: 3px; right : 3px;
/* there must be 'right' for ps-scrollbar-y-rail */ /* there must be 'right' for ps-scrollbar-y-rail */
width: 8px; width : 8px;
} }
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute; position : absolute;
/* please don't change 'position' */ /* please don't change 'position' */
background-color: #aaa; background-color : #aaa;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius : 4px;
-ms-border-radius: 4px; -ms-border-radius : 4px;
border-radius: 4px; border-radius : 4px;
-webkit-transition: background-color .2s linear; -webkit-transition : background-color .2s linear;
-moz-transition: background-color .2s linear; -moz-transition : background-color .2s linear;
-o-transition: background-color .2s linear; -o-transition : background-color .2s linear;
transition: background-color .2s linear; transition : background-color .2s linear;
right: 0; right : 0;
/* there must be 'right' for ps-scrollbar-y */ /* there must be 'right' for ps-scrollbar-y */
width: 8px; width : 8px;
} }
.ps-container:hover.ps-in-scrolling { .ps-container:hover.ps-in-scrolling {
@ -107,7 +107,7 @@
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity : .9;
} }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
@ -116,20 +116,21 @@
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity : .9;
} }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999; background-color: #999;
} }
.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail { .ps-container:hover > .ps-scrollbar-x-rail,
opacity: 0.6; .ps-container:hover > .ps-scrollbar-y-rail {
opacity: .6;
} }
.ps-container:hover > .ps-scrollbar-x-rail:hover { .ps-container:hover > .ps-scrollbar-x-rail:hover {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity : .9;
} }
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
@ -138,9 +139,9 @@
.ps-container:hover > .ps-scrollbar-y-rail:hover { .ps-container:hover > .ps-scrollbar-y-rail:hover {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity : .9;
} }
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
background-color: #999; background-color: #999;
} }

4
assets/src/sass/main.scss
View File

@ -17,6 +17,10 @@ code {
border-radius: .2em; border-radius: .2em;
} }
img {
max-width: 100%;
}
#content { #content {
position: fixed; position: fixed;
top : 3em; top : 3em;

8
templates/base_full.tmpl
View File

@ -20,10 +20,10 @@
<nav> <nav>
<ul> <ul>
<li><a href="/"><i class="fa fa-home fa-lg"></i> Home</a></li> <li><a href="/"><i class="fa fa-home fa-lg"></i> Home</a></li>
<li><a href="/admin/browse/content/"><i class="fa fa-newspaper-o"></i> Content</a></li> <li><a data-pjax href="/admin/browse/content/"><i class="fa fa-newspaper-o"></i> Content</a></li>
<li><a href="/admin/browse/"><i class="fa fa-folder-o"></i> Browse</a></li> <li><a data-pjax href="/admin/browse/"><i class="fa fa-folder-o"></i> Browse</a></li>
<li><a href="/admin/settings/"><i class="fa fa-cog"></i> Settings</a></li> <li><a data-pjax href="/admin/settings/"><i class="fa fa-cog"></i> Settings</a></li>
<li><a id="logout" href="#logout"><i class="fa fa-sign-out"></i> Logout</a></li> <li><a data-pjax id="logout" href="#logout"><i class="fa fa-sign-out"></i> Logout</a></li>
</ul> </ul>
</nav> </nav>
<div id="content"> <div id="content">