mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
clean up of index.html neeed to test this, probably stuff i did wrong
This commit is contained in:
Hugo Roy
opi
parent
6b9ee06e02
commit
3a6d92d89e
3 changed files with 125 additions and 75 deletions
183
css/style.less
183
css/style.less
|
|
@ -1,60 +1,15 @@
|
|||
@import "../bootstrap/less/bootstrap.less";
|
||||
|
||||
|
||||
html, body {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* The top heading of the doc
|
||||
/* Comments:
|
||||
*
|
||||
* 1. we need to rationalise the use of width and max widths. they seem to be
|
||||
* completely arbitrarily chosen. May not allow for a lot of flexibility…
|
||||
* especially on different screens size.
|
||||
*
|
||||
*/
|
||||
|
||||
#masthead {
|
||||
.page-header;
|
||||
.clearfix;
|
||||
.hidden-xs;
|
||||
.make-row(12);
|
||||
|
||||
.app.title {
|
||||
.make-sm-column(10);
|
||||
.desc {
|
||||
.small;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
.make-sm-column(2);
|
||||
a {
|
||||
.hidden;
|
||||
.glyphicon;
|
||||
.glyphicon-log-out;
|
||||
.btn;
|
||||
.btn-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#slider {
|
||||
.center-block;
|
||||
padding: 5px;
|
||||
max-width: 750px;
|
||||
html, body {
|
||||
width:100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#slider-container {
|
||||
max-width: 1500px;/*[RFC] why the max-width? */
|
||||
width: 1500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.block {
|
||||
|
|
@ -74,6 +29,119 @@ html, body {
|
|||
transition: margin-left 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.placehold {
|
||||
font-size: 0.0001em;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* The top heading of the doc
|
||||
*
|
||||
*/
|
||||
|
||||
#masthead {
|
||||
.page-header;
|
||||
.clearfix;
|
||||
.hidden-xs;
|
||||
.make-row(12);
|
||||
margin-top: 0;
|
||||
padding: 0 10px;
|
||||
|
||||
.app.title, .logout-button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.app.title {
|
||||
.make-sm-column(10);
|
||||
.desc {
|
||||
.small;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
.make-sm-column(2);
|
||||
font-size: 2em;
|
||||
a {
|
||||
.hidden;
|
||||
.glyphicon;
|
||||
.glyphicon-log-out;
|
||||
.btn;
|
||||
.btn-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The “slider”
|
||||
*
|
||||
*/
|
||||
|
||||
#slider {
|
||||
.center-block;
|
||||
padding: 5px;
|
||||
max-width: 750px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#slider-container {
|
||||
max-width: 1500px;/*[RFC] why the max-width? */
|
||||
width: 1500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#slideBack, #slideTo, #main {
|
||||
.block;
|
||||
}
|
||||
|
||||
/*
|
||||
* The main part of the app
|
||||
*
|
||||
*/
|
||||
|
||||
#main {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ajax-loader {
|
||||
.placehold;
|
||||
background: url(/img/ajax-loader.gif) 50% 50% no-repeat transparent;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
* The pop up dialog
|
||||
*
|
||||
*/
|
||||
|
||||
#popup {
|
||||
.modal;
|
||||
.fade;
|
||||
.modal-dialog;
|
||||
|
||||
#popup-title {
|
||||
.modal-dialog;
|
||||
.modal-content;
|
||||
.modal-header;
|
||||
.modal-title;
|
||||
}
|
||||
#popup-body {
|
||||
.modal-dialog;
|
||||
.modal-content;
|
||||
.modal-body;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Various styles
|
||||
*
|
||||
*/
|
||||
|
||||
body .form-control {
|
||||
padding: 6px;
|
||||
}
|
||||
|
|
@ -84,18 +152,6 @@ body .form-control {
|
|||
margin: -35px 120px 0 120px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-top: 0px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.page-header h1,
|
||||
.page-header .logout-button {
|
||||
margin-top:20px;
|
||||
}
|
||||
.page-header h1 {max-width: 85%; /* leave space for logout button */}
|
||||
.logout-button {font-size:2em;}
|
||||
|
||||
|
||||
div.br {
|
||||
height: 30px;
|
||||
}
|
||||
|
|
@ -111,6 +167,7 @@ div.br {
|
|||
background: rgba(255, 255, 255, 0.5);
|
||||
padding-top: 10%;
|
||||
}
|
||||
|
||||
.loader-content img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
2
css/style.min.css
vendored
2
css/style.min.css
vendored
File diff suppressed because one or more lines are too long
13
index.html
13
index.html
|
|
@ -21,18 +21,11 @@
|
|||
|
||||
<div id="slider-container">
|
||||
|
||||
<!--div id="slideBack" class="block" style="display: none;"></div>
|
||||
<div id="main" class="block">
|
||||
<div class="text-center"><a class="slide" href="#/login"><img src="img/ajax-loader.gif"></a></div>
|
||||
</div>
|
||||
<div id="slideTo" class="block" style="display: none; z-index: 100;"></div>
|
||||
<div class="clearfix"></div-->
|
||||
|
||||
<div id="slideBack" style="display: none;"></div>
|
||||
|
||||
<div id="main" role="main">
|
||||
<a class="slide" href="#/login">
|
||||
<img src="img/ajax-loader.gif" alt="loading">
|
||||
<span class="ajax-loader">loading…</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -53,8 +46,8 @@
|
|||
</div>
|
||||
</div-->
|
||||
<div id="popup" role="dialog">
|
||||
<h2 class="modal-title" id="popup-title"></h2>
|
||||
<div class="modal-body" id="popup-body"></div>
|
||||
<h2 id="popup-title"></h2>
|
||||
<div id="popup-body"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/vendor/jquery-1.10.1.min.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue