Gitlab CSE Unil

Commit 7b26ecb1 authored by Julien Furrer's avatar Julien Furrer
Browse files

Mise en place dialogue About. Accessible depuis page annotations et home pag

@TODO: remplir avec le contenu...
parent c6c60449
...@@ -399,7 +399,7 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -399,7 +399,7 @@ body.home.authenticated #home-container #home-action-box .well {
bottom: -10px; bottom: -10px;
} }
#home-container #home-action-box .panel-collapse { #home-container #home-action-box .panel-collapse {
padding: 0px; padding: 0;
} }
#home-container #home-action-box .btn-lg { #home-container #home-action-box .btn-lg {
border-radius: 4px; border-radius: 4px;
...@@ -420,11 +420,11 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -420,11 +420,11 @@ body.home.authenticated #home-container #home-action-box .well {
} }
#home-image img { #home-image img {
border-radius: 6px; border-radius: 6px;
background: url("../img/image-home.jpg") 0% 50% no-repeat; background: url("../img/image-home.jpg") 0 50% no-repeat;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
#home-image img { #home-image img {
background: url("../img/image-home-lg.jpg") 0% 50% no-repeat; background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
background-size: 1140px 761px; background-size: 1140px 761px;
width: 1140px; width: 1140px;
height: 761px; height: 761px;
...@@ -432,7 +432,7 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -432,7 +432,7 @@ body.home.authenticated #home-container #home-action-box .well {
} }
@media (min-width: 992px) and (max-width: 1199px) { @media (min-width: 992px) and (max-width: 1199px) {
#home-image img { #home-image img {
background: url("../img/image-home-lg.jpg") 0% 50% no-repeat; background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
background-size: 940px 628px; background-size: 940px 628px;
width: 940px; width: 940px;
height: 628px; height: 628px;
...@@ -440,7 +440,7 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -440,7 +440,7 @@ body.home.authenticated #home-container #home-action-box .well {
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991px) {
#home-image img { #home-image img {
background: url("../img/image-home-sm.jpg") 0% 50% no-repeat; background: url("../img/image-home-sm.jpg") 0 50% no-repeat;
background-size: 720px 525px; background-size: 720px 525px;
width: 720px; width: 720px;
height: 525px; height: 525px;
...@@ -465,7 +465,7 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -465,7 +465,7 @@ body.home.authenticated #home-container #home-action-box .well {
#main-home .intro h1 { #main-home .intro h1 {
color: #f2f2f2; color: #f2f2f2;
font-size: 32px; font-size: 32px;
margin-top: 0px; margin-top: 0;
text-shadow: 0 1px 0 #FFF; text-shadow: 0 1px 0 #FFF;
} }
#main-home .intro .lead { #main-home .intro .lead {
...@@ -473,12 +473,12 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -473,12 +473,12 @@ body.home.authenticated #home-container #home-action-box .well {
color: #ffffff; color: #ffffff;
} }
#login-mode { #login-mode {
margin-bottom: 0px; margin-bottom: 0;
} }
#login-mode .local-login-head { #login-mode .local-login-head {
position: absolute; position: absolute;
right: 15px; right: 15px;
bottom: 0px; bottom: 0;
} }
#login-mode .local-login-head a, #login-mode .local-login-head a,
#login-mode .local-login-head a:link, #login-mode .local-login-head a:link,
...@@ -521,6 +521,9 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -521,6 +521,9 @@ body.home.authenticated #home-container #home-action-box .well {
#login-mode #login-local-panel input.form-control::-webkit-input-placeholder { #login-mode #login-local-panel input.form-control::-webkit-input-placeholder {
color: #aaaaaa; color: #aaaaaa;
} }
body.home #dlg-about-adim .modal-dialog {
margin-top: 150px;
}
#dlg-about-adim .modal-footer { #dlg-about-adim .modal-footer {
padding: 5px; padding: 5px;
} }
...@@ -534,6 +537,41 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -534,6 +537,41 @@ body.home.authenticated #home-container #home-action-box .well {
#dlg-about-adim .logo:visited { #dlg-about-adim .logo:visited {
color: #0096c7; color: #0096c7;
text-decoration: none; text-decoration: none;
font-size: 65px;
display: block;
text-align: center;
margin-top: 30px;
}
#dlg-about-adim .about-links {
padding-left: 10px;
}
#dlg-about-adim .about-links li {
padding: 2px 0;
}
#dlg-about-adim .about-links a,
#dlg-about-adim .about-links a:link,
#dlg-about-adim .about-links a:visited {
color: #0096c7;
text-decoration: none;
}
#dlg-about-adim .about-links a:hover,
#dlg-about-adim .about-links a:active {
color: #007094;
}
#dlg-about-adim .modal-body .row > div {
min-height: 180px;
}
#dlg-about-adim .modal-body .row > div:first-child {
border-right: 1px solid #0096c7;
}
#dlg-about-adim .about-content .panel {
background-color: transparent;
box-shadow: none;
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin: 0;
} }
#main-navbar { #main-navbar {
min-width: 790px; min-width: 790px;
...@@ -782,7 +820,7 @@ body.home.authenticated #home-container #home-action-box .well { ...@@ -782,7 +820,7 @@ body.home.authenticated #home-container #home-action-box .well {
text-align: center; text-align: center;
border-radius: 12px; border-radius: 12px;
border: solid 8px rgba(0, 0, 0, 0.2); border: solid 8px rgba(0, 0, 0, 0.2);
margin: -55px auto 0px; margin: -55px auto 0;
} }
.canvas-container .dropzone .dropzone-inner-wrapper .dropzone-inner { .canvas-container .dropzone .dropzone-inner-wrapper .dropzone-inner {
padding: 20px; padding: 20px;
...@@ -796,12 +834,9 @@ canvas { ...@@ -796,12 +834,9 @@ canvas {
} }
#canvas-bbar { #canvas-bbar {
background-color: #cccccc; background-color: #cccccc;
padding: 2px 6px 0px; padding: 2px 6px 0;
line-height: 1px; line-height: 1px;
border-top-right-radius: 0; border-radius: 0 0 4px 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
} }
#canvas-bbar label { #canvas-bbar label {
float: left; float: left;
...@@ -2131,8 +2166,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active { ...@@ -2131,8 +2166,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active {
} }
#tool-colorselect .color-menu > li > a:hover, #tool-colorselect .color-menu > li > a:hover,
#tool-colorselect .color-menu > li > a:focus { #tool-colorselect .color-menu > li > a:focus {
background-color: #333330; background: #333330 none;
background-image: none;
border-color: transparent; border-color: transparent;
} }
#tool-colorselect .color-menu > li > a.c1, #tool-colorselect .color-menu > li > a.c1,
...@@ -2236,7 +2270,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active { ...@@ -2236,7 +2270,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active {
} }
.sldr .slider.slider-horizontal .slider-handle { .sldr .slider.slider-horizontal .slider-handle {
background-size: 10px 20px; background-size: 10px 20px;
background-position: 5px 0px; background-position: 5px 0;
} }
.btn-group-vertical .sldr { .btn-group-vertical .sldr {
width: 40px; width: 40px;
...@@ -2261,8 +2295,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active { ...@@ -2261,8 +2295,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active {
background-position: 0 -50px; background-position: 0 -50px;
} }
.btn-group-vertical .sldr.disabled { .btn-group-vertical .sldr.disabled {
background-image: none; background: #e0e0e0 none;
background-color: #e0e0e0;
} }
.btn-group-vertical .sldr .tooltip { .btn-group-vertical .sldr .tooltip {
text-shadow: none; text-shadow: none;
......
...@@ -367,7 +367,7 @@ body.home { ...@@ -367,7 +367,7 @@ body.home {
bottom: -10px; bottom: -10px;
} }
.panel-collapse { .panel-collapse {
padding: 0px; padding: 0;
} }
.btn-lg { .btn-lg {
border-radius: 4px; border-radius: 4px;
...@@ -391,11 +391,11 @@ body.home { ...@@ -391,11 +391,11 @@ body.home {
margin-bottom: 40px; margin-bottom: 40px;
img { img {
border-radius: 6px; border-radius: 6px;
background: url("../img/image-home.jpg") 0% 50% no-repeat; background: url("../img/image-home.jpg") 0 50% no-repeat;
// Large // Large
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
background: url("../img/image-home-lg.jpg") 0% 50% no-repeat; background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
background-size: 1140px 761px; background-size: 1140px 761px;
width: 1140px; width: 1140px;
height: 761px; height: 761px;
...@@ -403,14 +403,14 @@ body.home { ...@@ -403,14 +403,14 @@ body.home {
// Medium // Medium
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
// background: url("../img/image-home-md.jpg") 0% 50% no-repeat; // background: url("../img/image-home-md.jpg") 0% 50% no-repeat;
background: url("../img/image-home-lg.jpg") 0% 50% no-repeat; background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
background-size: 940px 628px; background-size: 940px 628px;
width: 940px; width: 940px;
height: 628px; height: 628px;
} }
// Small // Small
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
background: url("../img/image-home-sm.jpg") 0% 50% no-repeat; background: url("../img/image-home-sm.jpg") 0 50% no-repeat;
background-size: 720px 525px; background-size: 720px 525px;
width: 720px; width: 720px;
height: 525px; height: 525px;
...@@ -440,7 +440,7 @@ body.home { ...@@ -440,7 +440,7 @@ body.home {
h1 { h1 {
color: @home-color; color: @home-color;
font-size: 32px; font-size: 32px;
margin-top: 0px; margin-top: 0;
text-shadow: 0 1px 0 #FFF; text-shadow: 0 1px 0 #FFF;
} }
.lead { .lead {
...@@ -453,13 +453,13 @@ body.home { ...@@ -453,13 +453,13 @@ body.home {
#login-mode { #login-mode {
@local-login-link: lighten(@brand-primary, 20%); @local-login-link: lighten(@brand-primary, 20%);
margin-bottom: 0px; margin-bottom: 0;
.local-login-head { .local-login-head {
// .clearfix(); // .clearfix();
position: absolute; position: absolute;
right: 15px; right: 15px;
bottom: 0px; bottom: 0;
a, a:link, a:active, a:visited, a:hover { a, a:link, a:active, a:visited, a:hover {
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
...@@ -499,6 +499,11 @@ body.home { ...@@ -499,6 +499,11 @@ body.home {
// --------- // ---------
#dlg-about-adim { #dlg-about-adim {
body.home & .modal-dialog {
margin-top: 150px;
}
.modal-footer { .modal-footer {
padding: 5px; padding: 5px;
p { p {
...@@ -509,6 +514,36 @@ body.home { ...@@ -509,6 +514,36 @@ body.home {
.logo:active, .logo:visited { .logo:active, .logo:visited {
color: @unil-logo-blue; color: @unil-logo-blue;
text-decoration: none; text-decoration: none;
font-size: 65px;
display: block;
text-align: center;
margin-top: 30px;
}
.about-links {
padding-left: 10px;
li { padding: 2px 0; }
a, a:link, a:visited {
color: @unil-logo-blue;
text-decoration: none;
}
a:hover, a:active {
color: darken(@unil-logo-blue, 10%);
}
}
.modal-body .row > div {
min-height: 180px;
&:first-child {
border-right: 1px solid @unil-logo-blue;
}
}
.about-content .panel {
background-color: transparent;
box-shadow: none;
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin: 0;
} }
} }
...@@ -862,7 +897,7 @@ body.home { ...@@ -862,7 +897,7 @@ body.home {
text-align: center; text-align: center;
border-radius: 12px; border-radius: 12px;
border: solid 8px rgba(0, 0, 0, 0.2); border: solid 8px rgba(0, 0, 0, 0.2);
margin: -55px auto 0px; margin: -55px auto 0;
.dropzone-inner { .dropzone-inner {
padding: 20px; padding: 20px;
...@@ -881,13 +916,10 @@ canvas { ...@@ -881,13 +916,10 @@ canvas {
#canvas-bbar { #canvas-bbar {
background-color: @canvas-bbar-dark-bg; background-color: @canvas-bbar-dark-bg;
padding: 2px 6px 0px; padding: 2px 6px 0;
line-height: 1px; line-height: 1px;
border-top-right-radius: 0; border-radius: 0 0 4px 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
label { label {
float: left; float: left;
...@@ -1408,8 +1440,7 @@ canvas { ...@@ -1408,8 +1440,7 @@ canvas {
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px -1px rgba(255, 255, 255, 0.33); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px -1px rgba(255, 255, 255, 0.33);
&:hover, &:focus { &:hover, &:focus {
background-color: #333330; background: #333330 none;
background-image: none;
border-color: transparent; border-color: transparent;
} }
...@@ -1514,7 +1545,7 @@ canvas { ...@@ -1514,7 +1545,7 @@ canvas {
} }
&.slider-horizontal .slider-handle { &.slider-horizontal .slider-handle {
background-size: 10px 20px; background-size: 10px 20px;
background-position: 5px 0px; background-position: 5px 0;
} }
} }
...@@ -1544,8 +1575,7 @@ canvas { ...@@ -1544,8 +1575,7 @@ canvas {
background-position: 0 -50px; background-position: 0 -50px;
} }
&.disabled { &.disabled {
background-image: none; background: darken(@btn-default-bg, 12%) none;
background-color: darken(@btn-default-bg, 12%);
} }
.tooltip { .tooltip {
......
<div class="modal-header"> <div class="modal" id="dlg-about-adim">
<button type="button" class="close" data-dismiss="modal"><span <div class="modal-dialog">
aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <div class="modal-content">
<h4 class="modal-title">A propos d'ADIM</h4>
</div> <div class="modal-header">
<div class="modal-body"> <button type="button" class="close" data-dismiss="modal"><span
<div class="row"> aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<div class="col-sm-7"> <h4 class="modal-title">A propos d'ADIM</h4>
<a href="http://www.unil.ch/" class="logo unilogo-unil"></a> </div>
</div> <div class="modal-body">
<div class="col-sm-5"> <div class="row">
<ul class="list-unstyled small"> <div class="col-sm-4">
<li><br/></li> <a href="http://www.unil.ch/" class="logo unilogo-unil"></a>
<li><a href="#contacts.html" onclick="return false"> </div>
<div class="col-sm-8 about-content">
<ul class="nav nav-tabs small" role="tablist">
<li class="active" role="presentation">
<a href="#adim-about-body-contacts" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-envelope"></span>&nbsp; <span class="glyphicon glyphicon-envelope"></span>&nbsp;
Contacts</a></li> Contacts
<li><a href="#credits.html" onclick="return false"> </a>
</li>
<li role="presentation">
<a href="#adim-about-body-credits" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-glass"></span>&nbsp; <span class="glyphicon glyphicon-glass"></span>&nbsp;
Credits Credits
</a></li> </a>
<li><a href="#legal_info.html" onclick="return false"> </li>
<li role="presentation">
<a href="#adim-about-body-legal" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-briefcase"></span>&nbsp; <span class="glyphicon glyphicon-briefcase"></span>&nbsp;
Informations légale Informations légales
</a></li> </a>
</ul> </li>
</ul>
<div class="tab-content">
<div id="adim-about-body-contacts" class="tab-pane active" role="tabpanel">
<div class="text-center">
<br/><em class="text-info">Contenu en cours de rédaction</em>
</div>
</div>
<div id="adim-about-body-credits" class="tab-pane" role="tabpanel">
<div class="text-center">
<br/><em class="text-info">Contenu en cours de rédaction</em>
</div>
</div>
<div id="adim-about-body-legal" class="tab-pane" role="tabpanel">
<div class="text-center">
<br/><em class="text-info">Contenu en cours de rédaction</em>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer"> </div>
<p class="small text-center"> <div class="modal-footer">
&copy; 2015 Unil &mdash; <a href="http://www.unil.ch/">Université de Lausanne</a> <p class="small text-center">
</p> &copy; 2015 Unil &mdash; <a href="http://www.unil.ch/">Université de Lausanne</a>
</div> </p>
\ No newline at end of file </div>
</div>
</div>
</div>
\ No newline at end of file
...@@ -157,14 +157,9 @@ ...@@ -157,14 +157,9 @@
</div> </div>
</div> </div>
{# -- About -- #} {# -- About Dlg -- #}
<div class="modal" id="dlg-about-adim"> {% include "adim/_about-modal.inc.html" %}
<div class="modal-dialog">
<div class="modal-content">
{% include "adim/_about-modal.inc.html" %}
</div>
</div>
</div>
{% endblock modals %} {% endblock modals %}
......
...@@ -88,15 +88,15 @@ ...@@ -88,15 +88,15 @@
<a href="http://www.unil.ch/" class="logo unilogo-unil"></a> <a href="http://www.unil.ch/" class="logo unilogo-unil"></a>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<ul class="list-unstyled small"> <ul class="list-unstyled small about-links">
<li><a href="#contacts.html" onclick="return false"> <li><a href="#contacts" data-tab="#adim-about-body-contacts">
<span class="glyphicon glyphicon-envelope"></span>&nbsp; <span class="glyphicon glyphicon-envelope"></span>&nbsp;
Contacts</a></li> Contacts</a></li>
<li><a href="#credits.html" onclick="return false"> <li><a href="#credits" data-tab="#adim-about-body-credits">
<span class="glyphicon glyphicon-glass"></span>&nbsp; <span class="glyphicon glyphicon-glass"></span>&nbsp;
Credits Credits
</a></li> </a></li>
<li><a href="#legal_info.html" onclick="return false"> <li><a href="#info_legale" data-tab="#adim-about-body-legal">
<span class="glyphicon glyphicon-briefcase"></span>&nbsp; <span class="glyphicon glyphicon-briefcase"></span>&nbsp;
Informations légale Informations légale
</a></li> </a></li>
...@@ -111,6 +111,8 @@ ...@@ -111,6 +111,8 @@
{# <iframe sandbox="allow-same-origin" src="{% url "shib-login" %}" width="0" height="0"></iframe>#} {# <iframe sandbox="allow-same-origin" src="{% url "shib-login" %}" width="0" height="0"></iframe>#}
{% include "adim/_about-modal.inc.html" %}
{% endblock main_content %} {% endblock main_content %}
{% block main_container %}{% endblock %}