Gitlab CSE Unil

Commit 72ecece9 authored by Julien Furrer's avatar Julien Furrer
Browse files

Integration of Home page and About Box

parent bbfc6484
......@@ -360,8 +360,10 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
.modal('show');
});
// Image Manager: init and attach handlers to button
//
// Image Manager
// ----------------------------------
// init and attach handlers to button
this._anObjMgr = new AnObjMgr({el: "#aom-list-panel"});
this._anObjMgrModal = $("#aom-modal")
.data('loaded', false)
......@@ -373,6 +375,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
}, _showAnObjMgr);
//
// Annotable Event handler
// ------------------------
io.events.annotableChanged.add(function(data){
// Update name displayed in the navbar,
// only if the modification is applied to the currently edited anobj
......@@ -393,6 +398,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
$("#btn-export-image-png").on('click', function(evt) { evt.preventDefault(); _export('png'); });
$("#btn-export-image-svg").on('click', function(evt) { evt.preventDefault(); _export('svg'); });
// Display About Box
$("#adim-about-but").on('click', function(evt){ evt.preventDefault(); $("#dlg-about-adim").modal(); });
// Init Properties Panel
initPropertiesPanel();
......
#main-footer {
position: absolute;
bottom: 0;
background-color: #6C6E73;
width: 100%;
height: 120px;
height: 80px;
overflow: auto;
padding-top: 25px;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.33) inset;
padding-top: 5px;
margin-top: 0px;
background-color: #333333;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.25) inset;
}
#main-footer .logo {
margin-top: -3px;
......@@ -15,12 +15,12 @@
#main-footer,
#main-footer a,
#main-footer a:visited {
color: #eee;
color: #e9e9e9;
text-decoration: none;
}
#main-footer a:hover,
#main-footer a:active {
color: #fff;
color: #ffffff;
text-decoration: none;
border-bottom: dotted 1px #fff;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
......@@ -28,14 +28,14 @@
#main-footer .logo,
#main-footer a.logo {
line-height: 75px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33);
text-shadow: none;
}
#main-footer .logo:hover,
#main-footer a.logo:hover,
#main-footer .logo:active,
#main-footer a.logo:active {
border-bottom: none !important;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25);
text-shadow: none;
}
#main-footer ul a {
line-height: 1.8em;
......
@main-footer-height: 120px;
@main-footer-height: 80px;
@main-footer-bg: hsv(0, 0, 20%);
@main-footer-color: #e9e9e9;
// Footer
#main-footer {
position: absolute;
// position: absolute;
bottom: 0; //-@main-footer-height;
background-color: #6C6E73;
width: 100%;
height: @main-footer-height;
overflow: auto;
padding-top: 25px;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.33) inset;
padding-top: 5px;
margin-top: 0px;
background-color: @main-footer-bg;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.25) inset;
.logo {
margin-top: -3px;
......@@ -17,12 +20,12 @@
}
&,a,a:visited {
color: #eee;
color: @main-footer-color;
text-decoration: none;
}
a:hover,
a:active {
color: #fff;
color: lighten(@main-footer-color, 20%);
text-decoration: none;
border-bottom: dotted 1px #fff;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
......@@ -31,10 +34,10 @@
.logo,
a.logo {
line-height: 75px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33);
text-shadow: none; //0 0 1px rgba(0, 0, 0, 0.33);
&:hover, &:active {
border-bottom: none !important;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25);
text-shadow: none; //0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25);
}
}
......
.vertical-four-colors(@start-color: #00b3ee; @sec-color: #7a43b6; @color-stop-sec: 33%; @thrd-color: #679235; @color-stop-thrd: 66%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(@start-color, @sec-color @color-stop-sec, @thrd-color @color-stop-thrd, @end-color);
background-image: -o-linear-gradient(@start-color, @sec-color @color-stop-sec, @thrd-color @color-stop-thrd, @end-color);
background-image: linear-gradient(@start-color, @sec-color @color-stop-sec, @thrd-color @color-stop-thrd, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
\ No newline at end of file
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav .nav-divider.divider-vertical {
height: 32px;
width: 1px;
margin: 9px 10px;
}
.navbar-inverse .nav .nav-divider {
background-color: #555555;
}
.modal .modal-content {
background-image: -webkit-linear-gradient(top, #f6f6f6 0%, #d0d0d0 50px);
background-image: -o-linear-gradient(top, #f6f6f6 0%, #d0d0d0 50px);
background-image: linear-gradient(to bottom, #f6f6f6 0%, #d0d0d0 50px);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff6f6f6', endColorstr='#ffd0d0d0', GradientType=0);
}
.modal .modal-content .modal-header {
border-color: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-header .modal-title {
line-height: 1;
font-weight: 400;
}
.modal .modal-content .modal-footer {
border-color: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-body {
background-color: #fff;
}
.btn-adim-layertb {
color: #555555;
background-color: #aaaaaa;
border-color: #777777;
}
.btn-adim-layertb:hover,
.btn-adim-layertb:focus,
.btn-adim-layertb:active,
.btn-adim-layertb.active,
.open > .dropdown-toggle.btn-adim-layertb {
color: #555555;
background-color: #919191;
border-color: #585858;
}
.btn-adim-layertb:active,
.btn-adim-layertb.active,
.open > .dropdown-toggle.btn-adim-layertb {
background-image: none;
}
.btn-adim-layertb.disabled,
.btn-adim-layertb[disabled],
fieldset[disabled] .btn-adim-layertb,
.btn-adim-layertb.disabled:hover,
.btn-adim-layertb[disabled]:hover,
fieldset[disabled] .btn-adim-layertb:hover,
.btn-adim-layertb.disabled:focus,
.btn-adim-layertb[disabled]:focus,
fieldset[disabled] .btn-adim-layertb:focus,
.btn-adim-layertb.disabled:active,
.btn-adim-layertb[disabled]:active,
fieldset[disabled] .btn-adim-layertb:active,
.btn-adim-layertb.disabled.active,
.btn-adim-layertb[disabled].active,
fieldset[disabled] .btn-adim-layertb.active {
background-color: #aaaaaa;
border-color: #777777;
}
.btn-adim-layertb .badge {
color: #aaaaaa;
background-color: #555555;
}
.theme-light .btn-adim-layertb {
color: #555555;
background-color: #f0f0f0;
border-color: #c0c0c0;
}
.theme-light .btn-adim-layertb:hover,
.theme-light .btn-adim-layertb:focus,
.theme-light .btn-adim-layertb:active,
.theme-light .btn-adim-layertb.active,
.open > .dropdown-toggle.theme-light .btn-adim-layertb {
color: #555555;
background-color: #d7d7d7;
border-color: #a1a1a1;
}
.theme-light .btn-adim-layertb:active,
.theme-light .btn-adim-layertb.active,
.open > .dropdown-toggle.theme-light .btn-adim-layertb {
background-image: none;
}
.theme-light .btn-adim-layertb.disabled,
.theme-light .btn-adim-layertb[disabled],
fieldset[disabled] .theme-light .btn-adim-layertb,
.theme-light .btn-adim-layertb.disabled:hover,
.theme-light .btn-adim-layertb[disabled]:hover,
fieldset[disabled] .theme-light .btn-adim-layertb:hover,
.theme-light .btn-adim-layertb.disabled:focus,
.theme-light .btn-adim-layertb[disabled]:focus,
fieldset[disabled] .theme-light .btn-adim-layertb:focus,
.theme-light .btn-adim-layertb.disabled:active,
.theme-light .btn-adim-layertb[disabled]:active,
fieldset[disabled] .theme-light .btn-adim-layertb:active,
.theme-light .btn-adim-layertb.disabled.active,
.theme-light .btn-adim-layertb[disabled].active,
fieldset[disabled] .theme-light .btn-adim-layertb.active {
background-color: #f0f0f0;
border-color: #c0c0c0;
}
.theme-light .btn-adim-layertb .badge {
color: #f0f0f0;
background-color: #555555;
}
.btn-adim-dark {
color: #c4c4c4;
background-color: #767676;
border-color: #9c9c9c;
}
.btn-adim-dark:hover,
.btn-adim-dark:focus,
.btn-adim-dark:active,
.btn-adim-dark.active,
.open > .dropdown-toggle.btn-adim-dark {
color: #c4c4c4;
background-color: #5d5d5d;
border-color: #7e7e7e;
}
.btn-adim-dark:active,
.btn-adim-dark.active,
.open > .dropdown-toggle.btn-adim-dark {
background-image: none;
}
.btn-adim-dark.disabled,
.btn-adim-dark[disabled],
fieldset[disabled] .btn-adim-dark,
.btn-adim-dark.disabled:hover,
.btn-adim-dark[disabled]:hover,
fieldset[disabled] .btn-adim-dark:hover,
.btn-adim-dark.disabled:focus,
.btn-adim-dark[disabled]:focus,
fieldset[disabled] .btn-adim-dark:focus,
.btn-adim-dark.disabled:active,
.btn-adim-dark[disabled]:active,
fieldset[disabled] .btn-adim-dark:active,
.btn-adim-dark.disabled.active,
.btn-adim-dark[disabled].active,
fieldset[disabled] .btn-adim-dark.active {
background-color: #767676;
border-color: #9c9c9c;
}
.btn-adim-dark .badge {
color: #767676;
background-color: #c4c4c4;
}
.btn-cimaf-layer {
color: #aaaaaa;
background-color: #696969;
border-color: #909090;
}
.btn-cimaf-layer:hover,
.btn-cimaf-layer:focus,
.btn-cimaf-layer:active,
.btn-cimaf-layer.active,
.open > .dropdown-toggle.btn-cimaf-layer {
color: #aaaaaa;
background-color: #505050;
border-color: #717171;
}
.btn-cimaf-layer:active,
.btn-cimaf-layer.active,
.open > .dropdown-toggle.btn-cimaf-layer {
background-image: none;
}
.btn-cimaf-layer.disabled,
.btn-cimaf-layer[disabled],
fieldset[disabled] .btn-cimaf-layer,
.btn-cimaf-layer.disabled:hover,
.btn-cimaf-layer[disabled]:hover,
fieldset[disabled] .btn-cimaf-layer:hover,
.btn-cimaf-layer.disabled:focus,
.btn-cimaf-layer[disabled]:focus,
fieldset[disabled] .btn-cimaf-layer:focus,
.btn-cimaf-layer.disabled:active,
.btn-cimaf-layer[disabled]:active,
fieldset[disabled] .btn-cimaf-layer:active,
.btn-cimaf-layer.disabled.active,
.btn-cimaf-layer[disabled].active,
fieldset[disabled] .btn-cimaf-layer.active {
background-color: #696969;
border-color: #909090;
}
.btn-cimaf-layer .badge {
color: #696969;
background-color: #aaaaaa;
}
.btn-cimaf-layer:hover {
background-color: #838383;
border-color: #bbbbbb;
}
.btn-cimaf-layer.active {
color: #ffffff;
background-color: #68ac68;
border-color: #4cae4c;
}
.theme-light .btn-cimaf-layer {
font-weight: bold;
letter-spacing: 0.3px;
}
......@@ -6,7 +6,14 @@
@import "../lib/bootstrap/less/mixins";
@import "../lib/bootstrap/less/variables";
//
// Adim Variables
// --------------------------------------------------
@modal-header: #d0d0d0;
//
// Navbar
// --------------------------------------------------
.nav {
@marginY: ((@line-height-computed / 2) - 1);
@marginX: 10px;
......@@ -32,6 +39,26 @@
}
}
//
// Modals
// --------------------------------------------------
.modal {
.modal-content {
#gradient > .vertical(@start-color: lighten(@modal-header, 15%), @end-color: @modal-header, @end-percent: 50px);
.modal-header {
.modal-title { line-height: 1; font-weight: 400; }
border-color: @modal-content-border-color;
}
.modal-footer {
border-color: @modal-content-border-color;
}
.modal-body { background-color: #fff; }
}
}
//
// Buttons
// --------------------------------------------------
......
......@@ -440,14 +440,14 @@
content: "\e602";
}
#main-footer {
position: absolute;
bottom: 0;
background-color: #6C6E73;
width: 100%;
height: 120px;
height: 80px;
overflow: auto;
padding-top: 25px;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.33) inset;
padding-top: 5px;
margin-top: 0px;
background-color: #333333;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.25) inset;
}
#main-footer .logo {
margin-top: -3px;
......@@ -456,12 +456,12 @@
#main-footer,
#main-footer a,
#main-footer a:visited {
color: #eee;
color: #e9e9e9;
text-decoration: none;
}
#main-footer a:hover,
#main-footer a:active {
color: #fff;
color: #ffffff;
text-decoration: none;
border-bottom: dotted 1px #fff;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
......@@ -469,14 +469,14 @@
#main-footer .logo,
#main-footer a.logo {
line-height: 75px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33);
text-shadow: none;
}
#main-footer .logo:hover,
#main-footer a.logo:hover,
#main-footer .logo:active,
#main-footer a.logo:active {
border-bottom: none !important;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25);
text-shadow: none;
}
#main-footer ul a {
line-height: 1.8em;
......@@ -545,6 +545,9 @@ body {
.theme-light #page-loader {
background-color: #f2f2f2;
}
#main-navbar {
margin-bottom: 10px;
}
#main-navbar.navbar-default {
background-color: #e5e5e5;
box-shadow: 0 0 2px 0px #3d3d3d;
......@@ -602,6 +605,41 @@ input[type=number]::-webkit-outer-spin-button {
-ms-user-select: none;
user-select: none;
}*/
body.home {
overflow: auto;
background-color: #333333;
}
body.home #main-navbar {
display: none;
}
body.home #home-container {
padding: 40px 0 60px;
}
body.home #home-image {
padding-top: 20px;
}
#home-container {
background: #424242;
padding: 20px 0 40px;
}
#home-container h1 {
color: #efefef;
font-weight: 400;
margin-top: 5px;
}
#home-container h1 small {
color: #efefef;
font-weight: 300;
}
#home-container #home-action-box.well {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border-color: rgba(220, 220, 220, 0.1);
padding: 7px 15px;
}
#home-image img {
border-radius: 6px;
}
#main-home {
background-color: #eeeeee;
border-radius: 6px;
......@@ -618,35 +656,43 @@ input[type=number]::-webkit-outer-spin-button {
font-size: 18px;
color: #5e5e5e;
}
#login-mode .local-login-head {
margin-top: 10px;
#login-mode {
margin-bottom: 0px;
}
#login-mode .local-login-head:before,
#login-mode .local-login-head:after {
content: " ";
display: table;
}
#login-mode .local-login-head:after {
clear: both;
#login-mode .local-login-head {
position: absolute;
right: 0;
bottom: -18px;
}
#login-mode .local-login-head a,
#login-mode .local-login-head a:link,
#login-mode .local-login-head a:active,
#login-mode .local-login-head a:visited,
#login-mode .local-login-head a:hover {
color: #428bca;
font-size: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 0.25);
text-decoration: none;
}
#login-mode .local-login-head a:hover {
color: #60a4df;
color: #b5d5f0;
}
#login-mode #login-local-panel {
background-color: #333;
background: transparent ;
border-color: transparent;
border-bottom: 1px solid #525252;
box-shadow: 0 2px 4px -4px #111111 inset;
box-shadow: none;
}
#login-mode #login-local-panel .panel-collapse {
background: transparent linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 4px;
margin-top: 15px;
margin-bottom: 5px;
border: solid 1px rgba(0, 0, 0, 0.1);
border-bottom-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.05);
}
#login-mode #login-local-panel input.form-control {
margin-bottom: 2px;
font-size: 12px;
}
#login-mode #login-local-panel input.form-control::-moz-placeholder {
......@@ -659,19 +705,23 @@ input[type=number]::-webkit-outer-spin-button {
#login-mode #login-local-panel input.form-control::-webkit-input-placeholder {
color: #aaaaaa;
}
#exercise-list-container .list-group-item:hover,
#exercise-list-container .list-group-item:focus {
background-color: #f5f5f5;
#dlg-about-adim .modal-footer {
padding: 5px;
}
#dlg-about-adim .modal-footer p {
margin: 0;
}
#exercise-list-container .list-group-item h4 small {
line-height: 1.6em;
#dlg-about-adim .logo,
#dlg-about-adim .logo:hover,
#dlg-about-adim .logo:link,
#dlg-about-adim .logo:active,
#dlg-about-adim .logo:visited {
color: #0096c7;
text-decoration: none;
}
#main-navbar {
min-width: 790px;
}
#main-navbar.mode-review,
#main-navbar.mode-edit {
margin-bottom: 10px;
margin-bottom: 0px;
}
#main {
padding: 0px 15px;
......@@ -1317,6 +1367,26 @@ canvas.cursor-tool-arrow2 {
.navbar-inverse .nav .nav-divider {
background-color: #555555;
}
.modal .modal-content {
background-image: -webkit-linear-gradient(top, #f6f6f6 0%, #d0d0d0 50px);
background-image: -o-linear-gradient(top, #f6f6f6 0%, #d0d0d0 50px);
background-image: linear-gradient(to bottom, #f6f6f6 0%, #d0d0d0 50px);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff6f6f6', endColorstr='#ffd0d0d0', GradientType=0);
}
.modal .modal-content .modal-header {
border-color: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-header .modal-title {
line-height: 1;
font-weight: 400;
}
.modal .modal-content .modal-footer {
border-color: rgba(0, 0, 0, 0.2);