github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

improve design on mobile

pull/20/head
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).pjax('a', '#content');
$(document).pjax('a[data-pjax]', '#content');
});
$(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%;
max-width: none;
height : calc(100% - 6em);
margin : 1.5em auto;
margin : 0;
}
.editor.complete .toolbar {
width: 75%;
}
.editor.complete .cm-s-mdn-like.CodeMirror {
width : auto;
margin: 0 10%;
height: calc(100% - 3em);
.editor.complete .CodeMirror {
width : auto;
margin : 1.5em 10%;
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 */
.ps-container {
-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;
}
@ -15,7 +15,7 @@
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9;
opacity : .9;
}
.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 {
background-color: #eee;
opacity: 0.9;
opacity : .9;
}
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
@ -32,73 +32,73 @@
}
.ps-container > .ps-scrollbar-x-rail {
display: none;
position: absolute;
display : none;
position : absolute;
/* please don't change 'position' */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
opacity: 0;
-webkit-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;
transition: background-color .2s linear, opacity .2s linear;
bottom: 3px;
-moz-border-radius : 4px;
-ms-border-radius : 4px;
border-radius : 4px;
opacity : 0;
-webkit-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;
transition : background-color .2s linear, opacity .2s linear;
bottom : 3px;
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px;
height : 8px;
}
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute;
position : absolute;
/* please don't change 'position' */
background-color: #aaa;
background-color : #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
transition: background-color .2s linear;
bottom: 0;
-moz-border-radius : 4px;
-ms-border-radius : 4px;
border-radius : 4px;
-webkit-transition : background-color .2s linear;
-moz-transition : background-color .2s linear;
-o-transition : background-color .2s linear;
transition : background-color .2s linear;
bottom : 0;
/* there must be 'bottom' for ps-scrollbar-x */
height: 8px;
height : 8px;
}
.ps-container > .ps-scrollbar-y-rail {
display: none;
position: absolute;
display : none;
position : absolute;
/* please don't change 'position' */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
opacity: 0;
-webkit-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;
transition: background-color .2s linear, opacity .2s linear;
right: 3px;
-moz-border-radius : 4px;
-ms-border-radius : 4px;
border-radius : 4px;
opacity : 0;
-webkit-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;
transition : background-color .2s linear, opacity .2s linear;
right : 3px;
/* there must be 'right' for ps-scrollbar-y-rail */
width: 8px;
width : 8px;
}
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute;
position : absolute;
/* please don't change 'position' */
background-color: #aaa;
background-color : #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
transition: background-color .2s linear;
right: 0;
-moz-border-radius : 4px;
-ms-border-radius : 4px;
border-radius : 4px;
-webkit-transition : background-color .2s linear;
-moz-transition : background-color .2s linear;
-o-transition : background-color .2s linear;
transition : background-color .2s linear;
right : 0;
/* there must be 'right' for ps-scrollbar-y */
width: 8px;
width : 8px;
}
.ps-container:hover.ps-in-scrolling {
@ -107,7 +107,7 @@
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9;
opacity : .9;
}
.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 {
background-color: #eee;
opacity: 0.9;
opacity : .9;
}
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999;
}
.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
opacity: 0.6;
.ps-container:hover > .ps-scrollbar-x-rail,
.ps-container:hover > .ps-scrollbar-y-rail {
opacity: .6;
}
.ps-container:hover > .ps-scrollbar-x-rail:hover {
background-color: #eee;
opacity: 0.9;
opacity : .9;
}
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
@ -138,9 +139,9 @@
.ps-container:hover > .ps-scrollbar-y-rail:hover {
background-color: #eee;
opacity: 0.9;
opacity : .9;
}
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
background-color: #999;
}
}

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

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

8
templates/base_full.tmpl
View File

@ -20,10 +20,10 @@
<nav>
<ul>
<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 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 id="logout" href="#logout"><i class="fa fa-sign-out"></i> Logout</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>
<li><a data-pjax href="/admin/settings/"><i class="fa fa-cog"></i> Settings</a></li>
<li><a data-pjax id="logout" href="#logout"><i class="fa fa-sign-out"></i> Logout</a></li>
</ul>
</nav>
<div id="content">