From: Ciro Scognamiglio Date: Mon, 29 Sep 2014 09:48:26 +0000 (+0200) Subject: the fantaastic theme X-Git-Tag: myslice-1.2~1^2~21^2~9 X-Git-Url: http://git.onelab.eu/?p=myslice.git;a=commitdiff_plain;h=185bdec9058c9265a60532d099b21bee957cfeec the fantaastic theme --- diff --git a/portal/static/css/fantaastic.css b/portal/static/css/fantaastic.css index 411234b8..623285d3 100644 --- a/portal/static/css/fantaastic.css +++ b/portal/static/css/fantaastic.css @@ -1,3 +1,5 @@ +@import url("../fonts/opensans_bold_macroman/stylesheet.css"); + html { height: 100% } body { @@ -6,15 +8,32 @@ body { margin:0; padding:0; height: 100%; + letter-spacing:0.3px; } a, a:active, a:focus { outline: 0; + text-decoration:none; + color:#760073; +} +a:hover { + color:#0D0049; } +a.current { + text-decoration:underline; + color:#333333; +} +p.command { + padding:15px; + margin:15px 0; + color:#890000; + background-color:#E0E0E0; + font-family:Courier, monospace; +} h1 { border-bottom:1px solid #DDDDDD; padding:0 0 0 0; - margin:0 0 0 0; + margin:15px 0 15px 0; font-size:14pt; } h1 img { @@ -24,154 +43,177 @@ h1 img { } h2 { margin:0 0 15px 0; - font-size:13pt; - color:#0C0045; + font-size:14pt; + color:#333333; } h3 { - font-size:11pt; + margin:0 0 5px 0; + font-size:13pt; color:#201E62; } -button { - font-size:11pt; -} -div.wrapper { - width:980px; - margin:0 auto; - position:relative; +h4 { + margin:0 0 5px 0; + font-size:12pt; + color:#333333; } -div.container { - width:980px; - margin:25px auto; +span.subtitle { + color:#454545; + font-size:9pt; + font-weight:normal; + text-transform:uppercase; } -div.wide { - margin:25px auto; - padding:0 25px; +span.small { + font-size:9pt; } - -span.label { - font-size:11pt; +span.gray { color:gray; +} +span.type { + color:#201E62; + font-weight:bold; + font-size:9pt; +} +span.htitle { + color:#454545; + font-size:9pt; font-weight:normal; - padding:0; } -/***** Notifications *****/ -.warning { - border: 1px solid red; - margin: 20px 60px; - padding: 10px 20px; - color: red; - background-color: #f2dbdb; - text-align: center; +span.version { + font-size:8pt; + color:#888888; } -/* HEADER */ -div#header { - height:100px; - background-color:white; +input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], select, option { + min-width:260px; + padding:6px; + border:1pt solid #22606D; + vertical-align:bottom; + border-radius:0; } -div#secondary { - +textarea { + padding:6px; + border:1pt solid #22606D !important; + border-radius:0 !important; } -div#secondary ul { - position:absolute; - top:20px; - right:0; +span.label { + font-size:11pt; + color:gray; + font-weight:normal; + padding:0; } - -div#secondary li { +div.el { + padding-bottom:15px; +} +div.breadcrumbs { + margin:15px 0; + color:gray; font-size:10pt; - float:left; - list-style:none; - margin-right:30px; } -div#secondary li a { - color:black; +div.breadcrumbs a { + color:gray; } -div#secondary li a:hover { - color:#270A5A; - text-decoration:none; +div.breadcrumbs a:hover { + text-decoration:underline; } -div#secondary li:last-child { - margin-right:0; +.tab-pane { + padding-top:15px; } - -div#navigation { - background-color:black; - width:100%; - height:40px; +/* buttons */ +button.btn, input.btn { + padding:6px 10px; + border-radius:5px; + font-size:10pt; + font-weight:normal; } -div#navigation div.wrapper { - text-align:center; +button.btn span.glyphicon { + margin-right:6px; } -div#navigation ul { - margin:0; - padding:0; - display: inline-block; - list-style-type: none; - white-space: nowrap; +button.btn-default { + border-bottom:3px solid #cccccc; } - -div#navigation li { - color:white; - font-family:helvetica, sans-serif; - font-size:10pt ; - font-weight:normal; - line-height:0.8em; - letter-spacing:0.6pt; - list-style:none; - float:left; - padding:0; - margin:15px 50px 0 0; +button.btn-default:hover { + background-color:white; + border:1px solid #ADADAD; + border-bottom:3px solid #ADADAD; } -div#navigation li a { +button.btn-default:active { + background-color:white; + border:1px solid #ADADAD; + border-bottom:1px solid #ADADAD; + margin-top:2px; + box-shadow:none; +} +button.btn-primary { + border-bottom:3px solid #3071A9; +} +button.btn-primary:hover { + box-shadow:none; + background-color:#428bca; + border:1px solid #357ebd; + border-bottom:3px solid #3071A9; +} +button.btn-primary:active { + box-shadow:none; + border-bottom:1px solid #3071A9; + margin-top:2px; +} +button.btn-danger { + border-bottom:3px solid #A13F3A; +} +button.btn-danger:hover { + box-shadow:none; + background-color:#d9534f; + border:1px solid #d43f3a; + border-bottom:3px solid #A13F3A; +} +button.btn-danger:active { + border:1px solid #d43f3a; + box-shadow:none; + margin-top:2px; +} +button.btn-onelab, input.btn-onelab { + border:0; + border-bottom:3px solid #760073; + background-color:#302562; color:white; } -div#navigation li a:hover { - text-decoration:none; - color:#B8B2FF; +button.btn-onelab:hover, input.btn-onelab:hover { + border:0; + border-bottom:3px solid #760073; + background-color:#302562; + color:white; } -div#navigation li:last-child { - margin-right:0; +button.btn-onelab:active, input.btn-onelab:active { + box-shadow:none; + border-bottom:1px solid #760073; + margin-top:2px; } -div#navigation li.active { - padding:5px; - padding-top: 15px; - min-height: 40px; - margin-top: 0px; - background-color:gray; - color:#FF0000; -} -div#navigation li.slices { - position:relative; - cursor:pointer; +.container-resource button { + padding:2px 4px; + border-radius:3px; + font-size:9pt; + font-weight:normal; } -div#navigation .dropdown-menu { - color:white; - padding:0 15px 15px 15px; - margin-top:5px; - margin-left:-16px; - background-color:black; +.container-resource select,.container-resource option, .container-resource input { + padding:2px 4px; + font-size:9pt; } -div#navigation .dropdown-menu a { - color:white; +.badge { + font-size:9pt; + margin-left:4px; } - -div#menu-slice-list{ - display:none; - position:absolute; - background-color:black; - padding:15px; - left:-15px; - z-index:10; +/***** Notifications *****/ +.warning { + border: 1px solid red; + margin: 20px 60px; + padding: 10px 20px; + color: red; + background-color: #f2dbdb; + text-align: center; } -div#navigation .dropdown-menu li:first-child { - border-bottom:1px solid white; - padding-bottom:5px; - -} /* HOME DASHBOARD */ div#home-dashboard { color:black; @@ -245,24 +287,6 @@ div#home-dashboard div#home-slice-list li { } -.login-submit { - vertical-align:middle; - padding:0; -} -.lost-password { - font-size:10pt; - color:#CCCCCC; - text-align:right; - padding:0px; -} -.lost-password a { -} -.login-signup { - border-top:1px solid #CCCCCC; - text-align:center; - margin-top:15px; - padding:5px 0 0 0; -} /**/ /**/ @@ -270,15 +294,6 @@ div#home-dashboard div#home-slice-list li { div.well { } /**/ -/* BUTTON */ -.btn.btn-default { - font-weight: bold; -} - -.btn.btn-default:hover { - font-weight: bold; -} -/**/ /* TABLE */ table.table { margin:0; @@ -327,26 +342,22 @@ div#ticket-request p { margin:20px 0; } -ul.nav-tabs {} +ul.nav-tabs { + margin:0 0 15px 0; +} ul.nav-tabs ul {} ul.nav-tabs li {} ul.nav-section li a { + color:black; border-bottom:0; } ul.nav-section li:first-child { padding:0; } ul.nav-section li:first-child a { - font-weight:bold; - padding:6px 15px 4px 15px; } ul.nav-section li:first-child.active a { - padding:6px 15px 3px 15px; -} -ul.nav-section li:first-child img { - margin:0 4px 1px 0; - padding:0; } ul.nav-resources { @@ -357,42 +368,82 @@ ul.nav-resources a { } /* SLICE VIEW */ - - +div.container-resource, div.container-slice { + padding-right:15px; + padding-left:15px; +} +.table th { + border-top:0 !important; +} div#slice-view { margin:0; } div.list-group-item { border:0; + -moz-border-radius: 0; + border-radius: 0; background-color:white; font-weight:bold; padding-left:0; } a.list-group-item { + -moz-border-radius: 0; + border-radius: 0; border:0; background-color:white; - padding:3px 0 3px 10px; + padding:3px 2px 3px 10px; border-left:2pt white solid; } -a.list-group-item.active, a.list-group-item.active:hover { +a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus { + -moz-border-radius: 0; + border-radius: 0; font-weight: bold; color:black; - background-color:transparent; + background-color:#F5F5F5; border-left:2pt blue solid; } -a.list-group-item.active:hover { - background-color:#dddddd; -} + a.list-group-item:hover { + -moz-border-radius: 0; + border-radius: 0; border-left:2pt blue solid; } a.list-group-item p.list-group-item-text { + -moz-border-radius: 0; + border-radius: 0; font-size:9pt; font-style:italic; font-weight: normal; color: black !important; } +span.sl-resources { + font-size:9pt; + color:gray; +} +a.sl-resources, a.sl-resources:hover { + font-size:9pt; + border:0; + padding:2px 4px; + -moz-border-radius: 4px; + border-radius: 4px; + width:105px; + margin-left:4px; + margin-bottom:8px; + text-align: center; +} +a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus { + border:0; + -moz-border-radius: 4px; + border-radius: 4px; +} +a.sl-resources:first-child { + margin-left:12px; +} +button.btn-apply { + font-size:13px; + padding:2px 8px; +} div#slice-info { margin-top:25px; } @@ -471,6 +522,8 @@ div#slice-info td { padding:3px 5px; } .slice-pending button.apply { + font-size:14px; + padding:2px 5px; } .slice-pending button.clear { } @@ -481,3 +534,287 @@ div.dataTables_filter label{ float:left; width:400px; } + +/* HEADER */ + + +.header { + -moz-box-shadow: 0 0 1px rgba(82,82,82,0.6); + -webkit-box-shadow: 0 0 1px rgba(82,82,82,0.6); + box-shadow: 0 0 1px rgba(82,82,82,0.6); + height:61px; + background-color:white; +} + +div.navigation { + +} +div.navigation ul { + margin:26px 0 0 0; + padding:0; + display: inline-block; + list-style-type: none; + white-space: nowrap; +} + +div.navigation li { + color:#0C0047; + font-family:open_sansbold, sans-serif; + font-size:9pt; + font-weight:normal; + line-height:0.8em; + letter-spacing:0.4pt; + list-style:none; + float:left; + padding:0 15px; + margin:0; + text-transform:uppercase; +} +div.navigation li:hover { +} +div.navigation li a { + color:#0C0047; +} +div.navigation li a:hover, div.navigation li a.current { + color:#760073; + text-decoration:none; +} + +div.navigation li:last-child { + margin-right:0; +} + + +div.navigation .dropdown-menu { + color:black; + -moz-box-shadow: 1px 1px 0px 0 rgba(58, 48, 100,0.8); + -webkit-box-shadow: 1px 1px 0px 0 rgba(58, 48, 100,0.8); + box-shadow: 1px 1px 0px 0 rgba(58, 48, 100,0.8); + border-radius:2px; + padding:0 5px 5px 5px; + margin-top:5px; + margin-left:20px; +} +div.navigation .dropdown-menu ul { + margin:0; + padding:15px 5px 5px 5px; + display:list-item; +} +div.navigation .dropdown-menu li { + margin:0 10px 0 0; + padding:0 0 8px 0; + display:list-item; + float:none; + text-transform: none; +} + +div.navigation .dropdown-menu a { + font-family:Helvetica,sans-serif; + font-size:10pt; + color:black; +} +div.navigation .dropdown-menu li.title { + margin-bottom:10px; +} +div.navigation .dropdown-menu li.title a { + font-family:open_sansbold, sans-serif; +} + + +div.navigation .dropdown-menu li:first-child { + border-bottom:1px solid white; + padding-bottom:5px; + +} + +div.secondary { + text-align:right; +} + +div.secondary ul { + margin:6px 0 0 0; + padding:0; +} + +div.secondary li { + font-size:9pt; + display:inline; + list-style:none; + margin:0px; + padding:0; + margin-right:15px; + color:#747474; + letter-spacing:0.4px; +} +div.secondary li:last-child { + margin-right:0; +} +div.secondary li a { + color:#747474; +} +div.secondary li a:hover { + text-decoration:underline; +} +div.secondary .button { + width:300px; + margin-top:15px; +} +div.secondary .account { + margin-top:10px; + padding:0; + font-size:9pt; + color:gray; + text-align:right; +} +div.secondary .account span { + font-size:8pt; +} +div.secondary .account a { + color:black; +} + + +div.footer { + padding-top:15px; +} +div.footer div.bottom { + position:absolute; + bottom:0; +} +div.footer ul { + margin:6px 0 0 0; + padding:0; +} + +div.footer li { + font-size:9pt; + display:inline; + list-style:none; + margin:0px; + padding:0; + margin-right:15px; + color:#747474; + letter-spacing:0.4px; +} + +div.footer li a { + color:#747474; +} +div.footer li a:hover { + text-decoration:underline; +} +div.copy { + font-size:8pt; + color:gray; + padding-top:15px; + padding-bottom:15px; +} + +div.home { + font-size:11pt; + line-height:1.2em; + letter-spacing:0.3pt; + min-height:500px; + background-image: url('../img/bg-experiment.png'); + background-repeat:no-repeat; + background-size:cover; + background-position:center top; + background-color:#086274; + padding:100px 0; +} +div.home h2 { + color:white; + line-height:1.2em; + font-size:18pt; +} +div.home h3 { + color:white; + line-height:1.4em; +} +div.dashboard { + text-align:center; +} +div.dashboard div { + margin:25px 0; +} +div.dashboard ul { + text-align:left; + margin-left:24px; + list-style:none; +} +div.registration-form { + padding-top:150px; + text-align:center; +} + +.login-form input { + width:320px; +} +.login-form input[type=submit] { + width:108px; +} + +.login-submit { + vertical-align:middle; + padding:0; +} +.lost-password { + font-size:10pt; + color:black; + text-align:right; + padding:0px; +} +.lost-password a { + color:white; + text-shadow:0.5px 0.5px black; +} +.login-signup { + font-size:12pt; + color:white; + text-shadow:0.5px 0.5px black; + margin-top:45px; + padding:5px 0 0 4px; + +} +.login-signup a { + color:white; + text-shadow:0.5px 0.5px black; + padding-bottom:2px; + border-bottom:2pt solid white; +} +.login-signup a:hover { + text-decoration:none; +} +.login-signup button { + padding:8px; + border:0; + border-bottom:2px solid #540086; + background-color:#302562; + color:white; + width:100px; + border-radius:5px; + font-size:12pt; +} +div.slogan { + text-align:center; + color:white; + padding-top:60px; + text-shadow: 1px 1px #013540; +} + +th { + border:0 !important; +} + +div.monitor { + padding:40px 0 25px 0; +} +div.monitor h1 { + margin-bottom:25px; +} +div.s-monitor { + padding-bottom:25px; +} +span#stats-period-txt { + text-transform:lowercase; +} diff --git a/portal/static/img/fantaastic.png b/portal/static/img/fantaastic.png new file mode 100644 index 00000000..f4ec9a0d Binary files /dev/null and b/portal/static/img/fantaastic.png differ diff --git a/portal/templates/_footer.html b/portal/templates/_footer.html new file mode 100644 index 00000000..ad231763 --- /dev/null +++ b/portal/templates/_footer.html @@ -0,0 +1,16 @@ +
+
+
+
+ +
+
+
+
+ Copyright © UPMC Sorbonne Universités, on behalf of the OneLab consortium +
+
+
+
\ No newline at end of file diff --git a/portal/templates/base.html b/portal/templates/base.html index 268c9aa6..0f2ecb52 100644 --- a/portal/templates/base.html +++ b/portal/templates/base.html @@ -91,22 +91,7 @@ $(document).ready(function() { {% block base_content %} {% endblock %} {% endblock container %} -
-
-
-
- -
-
-
-
- Copyright © UPMC Sorbonne Universités, on behalf of the OneLab consortium -
-
-
-
+{% widget "_footer.html" %}
Loading...
 
diff --git a/portal/templates/fantaastic/fantaastic_footer.html b/portal/templates/fantaastic/fantaastic_footer.html new file mode 100644 index 00000000..307f7d3c --- /dev/null +++ b/portal/templates/fantaastic/fantaastic_footer.html @@ -0,0 +1,16 @@ +
+
+
+
+
    +
  • +
+
+
+
+
+ +
+
+
+
\ No newline at end of file diff --git a/portal/templates/fantaastic/fantaastic_home-view.html b/portal/templates/fantaastic/fantaastic_home-view.html new file mode 100644 index 00000000..e8e733ea --- /dev/null +++ b/portal/templates/fantaastic/fantaastic_home-view.html @@ -0,0 +1,188 @@ +{% extends "layout_base.html" %} +{% load portal_filters %} + +{% block content %} + +{% if username %} +
+
+ {%if 'is_pi' in pi %} +
+

+ EXPERIMENT +

+
+ +
+
+ +
+
+

Your slices + + + +

+
+
+
Loading Slices
+
+
+
+

MANAGEMENT

+
+ +
+
+ +
+
+
+

+ SUPPORT +

+
+ +
+
+ +
+
+ +
+

+ ACCOUNT +

+
+ +
+
+ +
+
+ {% if person.last_name %} + {{person.first_name}} {{person.last_name}}
+ {% endif %} + Username: {{person.email}} +
+
+
+ {%else%} +
+
+

+ EXPERIMENT +

+
+ +
+
+ +
+
+

Your slices + + +

+
+
+
Loading Slices
+
+
+
+

+ SUPPORT +

+
+ +
+
+ +
+
+ +
+

+ ACCOUNT +

+
+ +
+
+ +
+
+ {% if person.last_name %} + {{person.first_name}} {{person.last_name}}
+ {% endif %} + Username: {{person.email}} +
+
+
+ {%endif%} + +
+{% else %} +
+
+
+
+

+ FanTaaStic: +

+

+ the one-stop shop for ICT testbeds and support services +

+
+
+
+ {% widget '_widget-login-user.html' %} +
+
+
+
+
+{% endif %} + + + +{# widget "_widget-monitor.html" #} +{# widget "_widget-stats-top-slices.html" #} + +{% endblock %} diff --git a/portal/templates/fantaastic/fantaastic_widget-login-user.html b/portal/templates/fantaastic/fantaastic_widget-login-user.html new file mode 100644 index 00000000..7529c61f --- /dev/null +++ b/portal/templates/fantaastic/fantaastic_widget-login-user.html @@ -0,0 +1,26 @@ + diff --git a/portal/templates/fantaastic/fantaastic_widget-topmenu.html b/portal/templates/fantaastic/fantaastic_widget-topmenu.html index de37b04c..bfaaa62b 100644 --- a/portal/templates/fantaastic/fantaastic_widget-topmenu.html +++ b/portal/templates/fantaastic/fantaastic_widget-topmenu.html @@ -1,55 +1,50 @@ - -