Skip to content

GitLab

S
synnefo
Commit 697f4d77 authored by olga's avatar olga Committed by Alex Pyrgiotis
Browse files
Options

admin-ui: New style for details page 

Fix apyrgio/synnefo#184
parent 5b9d6f54
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 377 additions and 656 deletions
snf-admin-app/synnefo_admin/admin/static/css/bootstrap.css
View file @ 697f4d77
......@@ -387,7 +387,7 @@ html {
/* line 27, ../sass/bootstrap/_scaffolding.scss */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.42857;
color: white;
......
snf-admin-app/synnefo_admin/admin/static/sass/_details.scss
View file @ 697f4d77
@import "icon-fonts";
.object-details h4 .label {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.main {
padding: 5px 0 0px 0;
background: transparent;
&:hover {
// background: #DDD;
}
h4 .title{
font-size: 21px;
cursor: pointer;
}
a {
color: white;
}
.object-details {
padding-left: 0px;
padding-right: 0px;@import "settings";
body {
color: white;
a {
color: white;
}
}
.object-details h4 .label {
// font-size: 0.65em;
font-style: normal;
font-weight: normal;
float: right;
margin-left: 15px;
background: $almost-white;
color: $total-black;
&.important {
font-weight: bold;
}
&.label-success {
background: $good-karma-color;
border-color: $good-karma-color;
color: $almost-white;
}
}
.main {
padding: 5px 0 0px 0;
background: transparent;
&:hover {
// background: #DDD;
}
margin:2em 0 5em;
h4 .title{
font-size: 21px;
cursor: pointer;
}
a {
color: white;
}
.object-details {
padding-left: 0px;
padding-right: 0px;
font-size: 24px;
}
}
// .tab-content dl {
// background: white;
// }
body .object-details {
.object-details {
h4 {
margin-left: 0;
margin-right: 0;
font-size: 14px;
letter-spacing: 1px;
.lt{
float: left;
}
.rt {
padding-top:5px;
overflow: hidden;
}
.arrow {
position: relative;
padding: 0 8px;
&:hover {
top: 2px;
cursor: pointer;
}
}
.label{
float: right;
margin-left: 15px;
margin-bottom: 10px;
background: $almost-white;
color: $total-black;
&.important {
font-weight: bold;
}
&.label-success {
background: $good-karma-color;
border-color: $good-karma-color;
color: $almost-white;
}
}
em {
float: none;
&.os-info {
float: right;
position: relative;
bottom: 3px;
img {
height: 26px; // *** i think that is the size of all images temp use for preview
}
}
}
}
h3 {
font-size: 18px;
margin: 0 0 2em;
font-weight: 400;
line-height: $details-title-height;
em {
margin-left: 10px;
font-size: 14px;
}
span[class^="snf-details"] {
float: left;
margin-right: 8px;
font-size: $details-title-height;
}
}
.icon-link {
margin-right: 10px;
}
p {
margin: 10px 20px;
font-style: italic;
......@@ -98,21 +89,10 @@ body .object-details {
&>.object-details {
margin-left: -20px;
margin-right: -20px;
padding: 20px;
padding:12px 20px;
}
}
.part-two {
.object-details {
padding: 20px;
.object-details {
padding: 0 20px;
}
}
padding-bottom: 20px;
}
.object-details-content .nav-tabs>li {
a {
opacity: 0.7;
......@@ -140,157 +120,41 @@ body .object-details {
}
}
body .object-details h4 {
em {
float: none;
&.os-info {
float: right;
position: relative;
bottom: 3px;
// margin-right: 6px;
img {
height: 26px; // *** i think that is the size of all images temp use for preview
}
}
}
}
.content-seperator {
width: 100%;
border-bottom: 1px solid white;
margin-top: 20px;
margin-bottom: 20px;
}
.content.part-one {
margin-bottom: 0;
margin-top: 160px;
}
.content.part-two {
margin-top: 0;
}
}
}
body .well {
border-color: $blue-light;
}
body .object-details {
h4 {
margin-left: 0;
margin-right: 0;
}
h3 {
margin-left: 0;
margin-top:0;
em {
font-size: 0.6em;
font-weight: bold;
}
}
p {
margin: 10px 20px;
font-style: italic;
}
.length {
margin-left: 6px;
float: right;
border: 0 none;
&::before {
content: '( ';
}
&::after {
content: ' )';
}
}
&>.object-details {
margin-left: -20px;
margin-right: -20px;
padding: 20px;
}
}
.part-two {
.object-details {
&>.object-details {
border-top: 2px solid $gray-light-extra;
background: lighten($body-bg, 3%);
padding: 20px;
.object-details {
padding: 0 20px;
padding: 5px 20px;
&:hover {
background: lighten($body-bg, 5%);
}
}
}
}
.object-details-content .nav-tabs>li {
a {
opacity: 0.7;
color: white;
}
&.active>a {
opacity: 1;
border-color: transparent;
background: $gray-light;
color: white;
border-radius: 0;
}
&:not(.active)>a:hover {
opacity: 1;
color: white;
border-color: transparent;
background: transparent;
}
}
.tab-pane {
overflow: auto;
th {
color: $gray-dark;
}
.snf-details-volume {
@extend .snf-volume-full;
}
body .object-details h4 {
em {
float: none;
&.os-info {
float: right;
position: relative;
bottom: 3px;
// margin-right: 6px;
img {
height: 26px; // *** i think that is the size of all images temp use for preview
}
}
}
.snf-details-vm {
@extend .snf-pc-full;
}
.content-seperator {
width: 100%;
border-bottom: 1px solid white;
margin-top: 20px;
margin-bottom: 20px;
.snf-details-project {
@extend .snf-clipboard-h;
}
.content.part-one {
margin-bottom: 0;
margin-top: 160px;
.snf-details-network {
@extend .snf-network-full;
}
.content.part-two {
margin-top: 0;
.snf-details-quota {
@extend .snf-wallet-full;
}
h4 {
.arrow {
position: relative;
padding: 0 8px;
&:hover {
top: 2px;
cursor: pointer;
}
}
.snf-details-nic {
@extend .snf-nic-full;
}
.icon-link {
margin-right: 10px;
.snf-details-user {
@extend .snf-user-full;
}
snf-admin-app/synnefo_admin/admin/static/sass/_settings.scss
View file @ 697f4d77
......@@ -43,3 +43,4 @@ $default-btn-padding: 8px;
$menu-height: 50px;
$hover-nav-color: #333;
$datatabled-actions-height: 35px;
$details-title-height: 40px;
snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_variables.scss
View file @ 697f4d77
......@@ -44,7 +44,7 @@ $link-hover-color: lighten($link-color, 10%) !default;
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-sans-serif: 'Open Sans', sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
......
snf-admin-app/synnefo_admin/admin/static/sass/extra.scss
View file @ 697f4d77
......@@ -24,6 +24,11 @@ body {
.container-solid{
min-width: 1050px!important;
}
.container:not(.container-solid){
max-width: 960px;
}
// custom styles ovewriting bootstrap
// labels
.label {
......@@ -33,7 +38,7 @@ body {
.info-block h3 .badge { font-size: 0.8em; padding: 5px 8px; background-color:#659CEF;}
.object-anchor { margin-bottom: 5px; height:15px; }
.object-anchor {height:2px; }
/* new styles olga */
......@@ -251,11 +256,6 @@ svg>text:last-child {
}
}
.object-details-content {
color: white;
}
.tab-content {
background: $gray-light;
padding: 20px;
......@@ -264,22 +264,12 @@ svg>text:last-child {
}
}
.info-block.main {
margin-bottom: 5em;
}
.content-seperator {
display: none;
}
.part-two {
&>.object-details {
border: 1px solid $gray-light-extra;
}
}
.selection-indicator {
margin-right: 6px;
cursor: pointer;
......@@ -392,4 +382,4 @@ body>.popover {
margin-bottom: 8px;
overflow: visible;
}
}
\ No newline at end of file
}
snf-admin-app/synnefo_admin/admin/templates/admin/_base_list_head.html
View file @ 697f4d77
......@@ -9,6 +9,7 @@
</a>
{% endif %}
<h3>
<span class="snf-details-{{type}}"></span>
{{ type|display_list_type }}
<em> of '{{ main_item|repr }}'</em>
</h3>
......
snf-admin-app/synnefo_admin/admin/templates/admin/_ip_details.html
View file @ 697f4d77
......@@ -5,14 +5,18 @@
<div class="object-details {{ rowcls }}" data-id="{{ip.pk}}"
data-type="{{type}}">
<h4 class="clearfix">
<a href="{% url admin-details type ip.pk %}" class="snf-search icon-link" title="Details for {{ ip.address }}"></a>
<span class="title">{{ ip.address }}</span>
<span class="arrow snf-angle-down"></span>
<span class="label">ID: {{ip.pk}}</span>
{% if ip.floating_ip %}
<span class="label">FLOATING</span>
{% endif %}
<span class="label">IP Version: {{ ip.ipversion|upper }}</span>
<div class="lt">
<a href="{% url admin-details type ip.pk %}" class="snf-search icon-link" title="Details for {{ ip.address }}"></a>
<span class="title">{{ ip.address }}</span>
<span class="arrow snf-angle-down"></span>
</div>
<div class="rt">
<span class="label">ID: {{ip.pk}}</span>
{% if ip.floating_ip %}
<span class="label">FLOATING</span>
{% endif %}
<span class="label">IP Version: {{ ip.ipversion|upper }}</span>
</div>
</h4>
<div class="tags">
</div>
......
snf-admin-app/synnefo_admin/admin/templates/admin/_network_details.html
View file @ 697f4d77
......@@ -5,12 +5,17 @@
<div class="network-details object-details {{ rowcls }}" data-id="{{network.pk}}"
data-type="{{type}}">
<h4 class="clearfix">
<a href="{% url admin-details type network.pk %}" class="snf-search icon-link" title="Details for {{ network|repr }}"></a>
<span class="title">{{ network|repr }}</span>
<span class="arrow snf-angle-down"></span>
{{ network|network_deleted_label|safe }}
{{ network|object_status_label|safe }}
<span class="label">ID: {{ network.pk }}</span>
<div class="lt">
<a href="{% url admin-details type network.pk %}" class="snf-search icon-link" title="Details for {{ network|repr }}"></a>
<span class="title">{{ network|repr }}</span>
<span class="arrow snf-angle-down"></span>
</div>
<div class="rt">
{{ network|network_deleted_label|safe }}
{{ network|object_status_label|safe }}
<span class="label">ID: {{ network.pk }}</span>
</div>
</h4>
<div class="network-details-content object-details-content">
<ul class="nav nav-tabs">
......
snf-admin-app/synnefo_admin/admin/templates/admin/_nic_details.html
View file @ 697f4d77
......@@ -4,11 +4,15 @@
<div class="object-anchor" id="nic-{{nic.pk}}"></div>
<div class="object-details {{ rowcls }}">
<h4>
<span class="title">{{ nic|repr }}</span>
<span class="arrow snf-angle-down"></span>
<span class="label">ID: {{nic.pk}}</span>
<span class="label">MAC: {{ nic.mac }}</span>
<span class="label">{{ nic.state|upper }}</span>
<div class="lt">
<span class="title">{{ nic|repr }}</span>
<span class="arrow snf-angle-down"></span>
</div>
<div class="lt">
<span class="label">ID: {{nic.pk}}</span>
<span class="label">MAC: {{ nic.mac }}</span>
<span class="label">{{ nic.state|upper }}</span>
</div>
</h4 class="clearfix">
<div class="tags">
</div>
......
snf-admin-app/synnefo_admin/admin/templates/admin/_project_details.html
View file @ 697f4d77
......@@ -5,18 +5,22 @@
<div class="object-details {{ rowcls }}" data-id="{{project.uuid}}"
data-type="{{type}}">
<h4 class="clearfix">
<a href="{% url admin-details type project.uuid %}" class="snf-search icon-link" title="Details for {{ project|repr }}"></a>
<span class="title">{{ project|repr }}</span>
<span class="arrow snf-angle-down"></span>
<span class="label">{{ project.state_display|upper }}</span>
<span class="label">UUID: {{ project.uuid }}</span>
<span class="label">
{% if project.is_base %}
SYSTEM
{% else %}
Members: {{ project.members_count }}
{% endif %}
</span>
<div class="lt">
<a href="{% url admin-details type project.uuid %}" class="snf-search icon-link" title="Details for {{ project|repr }}"></a>
<span class="title">{{ project|repr }}</span>
<span class="arrow snf-angle-down"></span>
</div>
<div class="rt">
<span class="label">{{ project.state_display|upper }}</span>
<span class="label">UUID: {{ project.uuid }}</span>
<span class="label">
{% if project.is_base %}
SYSTEM
{% else %}
Members: {{ project.members_count }}
{% endif %}
</span>
</div>
</h4>
<div class="object-details-content">
<ul class="nav nav-tabs">
......
snf-admin-app/synnefo_admin/admin/templates/admin/_quota_details.html
View file @ 697f4d77
......@@ -3,9 +3,13 @@
<div class="object-anchor" id="source-{{project.id}}"></div>
<div class="object-details {{ rowcls }}">
<h4 class="clearfix">
<span class="title">{{ project|repr }}</span>
<span class="arrow snf-angle-down"></span>
<span class="label">ID: {{ project.id }}</span>
<div class="lt">
<span class="title">{{ project|repr }}</span>
<span class="arrow snf-angle-down"></span>
</div>
<div class="rt">
<span class="label">ID: {{ project.id }}</span>
</div>
</h4>
<div class="object-details-content">
<ul class="nav nav-tabs">
......
snf-admin-app/synnefo_admin/admin/templates/admin/_user_details.html
View file @ 697f4d77
......@@ -5,12 +5,16 @@
<div class="object-details {{ rowcls }}" data-id="{{user.uuid}}"
data-type="{{type}}">
<h4 class="clearfix">
<a href="{% url admin-details type user.uuid %}" class="snf-search icon-link" title="Details for {{ user|repr }}"></a>
<span class="title">{{ user|repr }}</span>
<span class="arrow snf-angle-down"></span>
<span class="label">{{ user.status_display|upper }}</span>
<span class="label">UUID: {{ user.uuid }}</span>
<span class="label">{{ user.email }}</span>
<div class="lt"
<a href="{% url admin-details type user.uuid %}" class="snf-search icon-link" title="Details for {{ user|repr }}"></a>
<span class="title">{{ user|repr }}</span>
<span class="arrow snf-angle-down"></span>
</div>
<div class="rt">
<span class="label">{{ user.status_display|upper }}</span>
<span class="label">UUID: {{ user.uuid }}</span>
<span class="label">{{ user.email }}</span>
</div>
</h4>
<div class="object-details-content">
......
snf-admin-app/synnefo_admin/admin/templates/admin/_vm_details.html
View file @ 697f4d77
......@@ -5,22 +5,26 @@
<div class="vm-details object-details {{ rowcls }}" data-id="{{vm.pk}}"
data-type="{{type}}">
<h4 class="clearfix">
<a href="{% url admin-details type vm.pk %}" class="snf-search icon-link" title="Details for {{ vm|repr }}"></a>
<span class="title">{{ vm|repr }}</span>
<span class="arrow snf-angle-down"></span>
{% if vm.suspended %}
<span class="label label-warning">SUSPENDED</span>
{% endif %}
{{ vm|object_status_label|safe }}
<span class="label">ID: {{ vm.pk }}</span>
<span class="label">{{ vm|vm_public_ip }}</span>
<span class="label flavor">
<span class="cpu">{{ vm.flavor.cpu }}x</span>
<span class="ram">{{ vm.flavor.ram}}MB</span>
<span class="disk">{{ vm.flavor.disk }}GB</span>
</span>
<em class="os-info"><img src="{{ UI_MEDIA_URL }}images/icons/os/{{ vm|get_os }}.png" />{{ vm|get_os }}</em>
</h4>
<div class="lt">
<a href="{% url admin-details type vm.pk %}" class="snf-search icon-link" title="Details for {{ vm|repr }}"></a>
<span class="title">{{ vm|repr }}</span>
<span class="arrow snf-angle-down"></span>