Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Style fixes for Application Tab. View as well as install dialog

This commit is contained in:
Michael Hackstein 2014-12-19 13:09:07 +01:00
parent 70354aee35
commit abfe71e8ce
5 changed files with 166 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
js/apps/system/aardvark/frontend/js/templates/applicationDetailView.ejs
View File

@ -1,5 +1,5 @@
<script id="applicationDetailView.ejs" type="text/template"> <script id="applicationDetailView.ejs" type="text/template">
<div class="applicationDetailView"> <div class="application-detail-view">
<div class="headerBar"> <div class="headerBar">
<div class="breadcrumb"> <div class="breadcrumb">
<a class="activeBread" href="#applications">Applications</a> <a class="activeBread" href="#applications">Applications</a>
@ -9,17 +9,25 @@
</a> </a>
</div> </div>
</div> </div>
<section> <section class="info">
<div class="header"> <div class="header">
<div class="header_left"> <div class="header_left">
<img src="foxxes/thumbnail/<%=attributes.app %>" class="icon" alt="Icon for App"> <div class="header-icon-container">
<img src="foxxes/thumbnail/<%=attributes.app %>" class="icon" alt="Icon for App">
</div>
<input type="button" class="open button-success" disabled="true" value="Open"> <input type="button" class="open button-success" disabled="true" value="Open">
<input type="button" class="delete button-danger" disabled="true" value="Delete"> <input type="button" class="delete button-danger" disabled="true" value="Delete">
</div> </div>
<div class="header_right"> <div class="header_right">
<h3> <h3>
<%= attributes.name %> <%= attributes.name %>
<span class="license"><%= attributes.license %></span> </h3>
<h3>
<% if (attributes.license) { %>
<span class="license"><%= attributes.license %></span>
<% } %>
</h3>
<h3>
<% if (attributes.development) { %> <% if (attributes.development) { %>
<span class="version">devel</span> <span class="version">devel</span>
<% } else { %> <% } else { %>
@ -33,7 +41,7 @@
<iframe src="http://localhost:8529/_db/_system/_admin/aardvark/standalone.html#application/documentation/<%= attributes._key %>" name="Documentation"></iframe> <iframe src="http://localhost:8529/_db/_system/_admin/aardvark/standalone.html#application/documentation/<%= attributes._key %>" name="Documentation"></iframe>
</div> </div>
</section> </section>
<aside> <aside class="meta">
<dl> <dl>
<dt>Author</dt> <dt>Author</dt>
<dd><%= attributes.author %></dd> <dd><%= attributes.author %></dd>

36
js/apps/system/aardvark/frontend/scss/_applicationDetailView.scss
View File

@ -1,27 +1,43 @@
.applicationDetailView { .application-detail-view {
section { section.info {
float: left; float: left;
width: 900px;
.header { .header {
float: left; float: left;
height: 200px;
margin-bottom: 10px; margin-bottom: 10px;
position: relative;
.header_left { .header_left {
float: left; position: absolute;
width: 170px; width: 170px;
text-align: center; text-align: center;
img { div.header-icon-container {
height: 160px;
margin: 0px 0px 4px; margin: 0px 0px 4px;
width: 160px;
img.icon {
height: auto;
max-height: 160px;
max-width: 160px;
width: auto;
}
} }
} }
.header_right { .header_right {
float: left; position: relative;
clear: right; left: 170px;
padding: 5px; padding: 5px;
h3 {
padding-right: 5px;
float: left;
}
.license, .version { .license, .version {
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
@ -33,6 +49,10 @@
position: relative; position: relative;
top: -2px; top: -2px;
} }
.description {
clear: left;
}
} }
} }
@ -44,7 +64,7 @@
} }
} }
aside { aside.meta {
float: left; float: left;
clear: right; clear: right;
width: 200px; width: 200px;

25
js/apps/system/aardvark/frontend/scss/_resizing.scss
View File

@ -474,6 +474,31 @@ div.resizecontainer {
height: $dashboard-height / 2; height: $dashboard-height / 2;
width: $legend-width / 2; width: $legend-width / 2;
} }
.application-detail-view {
section.info {
@if $i < 3 {
width: $content-size;
.header_right {
width: $content-size - 170px;
}
} @else {
width: $content-size - 200px;
.header_right {
width: $content-size - 370px;
}
}
}
@if $i < 3 {
aside.meta {
display: none;
}
}
}
} }
} }

124
js/apps/system/aardvark/frontend/scss/generated.css
View File

@ -2309,7 +2309,14 @@ div.resizecontainer {
display: none; display: none;
font-size: 10px; font-size: 10px;
height: 100px; height: 100px;
width: 0; } } width: 0; }
.application-detail-view section.info {
width: 228px; }
.application-detail-view section.info .header_right {
width: 58px; }
.application-detail-view aside.meta {
display: none; } }
@media (min-width: 490px) and (max-width: 729px) { @media (min-width: 490px) and (max-width: 729px) {
div.resizecontainer { div.resizecontainer {
width: 468px; } width: 468px; }
@ -2490,7 +2497,14 @@ div.resizecontainer {
display: none; display: none;
font-size: 10px; font-size: 10px;
height: 100px; height: 100px;
width: 0; } } width: 0; }
.application-detail-view section.info {
width: 468px; }
.application-detail-view section.info .header_right {
width: 298px; }
.application-detail-view aside.meta {
display: none; } }
@media (min-width: 730px) and (max-width: 969px) { @media (min-width: 730px) and (max-width: 969px) {
div.resizecontainer { div.resizecontainer {
width: 708px; } width: 708px; }
@ -2671,7 +2685,12 @@ div.resizecontainer {
display: none; display: none;
font-size: 10px; font-size: 10px;
height: 100px; height: 100px;
width: 0; } } width: 0; }
.application-detail-view section.info {
width: 508px; }
.application-detail-view section.info .header_right {
width: 338px; } }
@media (min-width: 970px) and (max-width: 1209px) { @media (min-width: 970px) and (max-width: 1209px) {
div.resizecontainer { div.resizecontainer {
width: 948px; } width: 948px; }
@ -2849,7 +2868,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 11px; font-size: 11px;
height: 117.5px; height: 117.5px;
width: 60px; } } width: 60px; }
.application-detail-view section.info {
width: 748px; }
.application-detail-view section.info .header_right {
width: 578px; } }
@media (min-width: 1210px) and (max-width: 1449px) { @media (min-width: 1210px) and (max-width: 1449px) {
div.resizecontainer { div.resizecontainer {
width: 1188px; } width: 1188px; }
@ -3027,7 +3051,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 12px; font-size: 12px;
height: 135px; height: 135px;
width: 65px; } } width: 65px; }
.application-detail-view section.info {
width: 988px; }
.application-detail-view section.info .header_right {
width: 818px; } }
@media (min-width: 1450px) and (max-width: 1689px) { @media (min-width: 1450px) and (max-width: 1689px) {
div.resizecontainer { div.resizecontainer {
width: 1428px; } width: 1428px; }
@ -3205,7 +3234,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 13px; font-size: 13px;
height: 150px; height: 150px;
width: 70px; } } width: 70px; }
.application-detail-view section.info {
width: 1228px; }
.application-detail-view section.info .header_right {
width: 1058px; } }
@media (min-width: 1690px) and (max-width: 1929px) { @media (min-width: 1690px) and (max-width: 1929px) {
div.resizecontainer { div.resizecontainer {
width: 1668px; } width: 1668px; }
@ -3383,7 +3417,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 14px; font-size: 14px;
height: 170px; height: 170px;
width: 80px; } } width: 80px; }
.application-detail-view section.info {
width: 1468px; }
.application-detail-view section.info .header_right {
width: 1298px; } }
@media (min-width: 1930px) and (max-width: 2169px) { @media (min-width: 1930px) and (max-width: 2169px) {
div.resizecontainer { div.resizecontainer {
width: 1908px; } width: 1908px; }
@ -3561,7 +3600,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 15px; font-size: 15px;
height: 200px; height: 200px;
width: 85px; } } width: 85px; }
.application-detail-view section.info {
width: 1708px; }
.application-detail-view section.info .header_right {
width: 1538px; } }
@media (min-width: 2170px) and (max-width: 2409px) { @media (min-width: 2170px) and (max-width: 2409px) {
div.resizecontainer { div.resizecontainer {
width: 2148px; } width: 2148px; }
@ -3739,7 +3783,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 15px; font-size: 15px;
height: 150px; height: 150px;
width: 70px; } } width: 70px; }
.application-detail-view section.info {
width: 1948px; }
.application-detail-view section.info .header_right {
width: 1778px; } }
@media (min-width: 2410px) and (max-width: 2649px) { @media (min-width: 2410px) and (max-width: 2649px) {
div.resizecontainer { div.resizecontainer {
width: 2388px; } width: 2388px; }
@ -3917,7 +3966,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 15px; font-size: 15px;
height: 150px; height: 150px;
width: 70px; } } width: 70px; }
.application-detail-view section.info {
width: 2188px; }
.application-detail-view section.info .header_right {
width: 2018px; } }
@media (min-width: 2650px) and (max-width: 2889px) { @media (min-width: 2650px) and (max-width: 2889px) {
div.resizecontainer { div.resizecontainer {
width: 2628px; } width: 2628px; }
@ -4095,7 +4149,12 @@ div.resizecontainer {
.dashboard-half-height-legend { .dashboard-half-height-legend {
font-size: 15px; font-size: 15px;
height: 150px; height: 150px;
width: 70px; } } width: 70px; }
.application-detail-view section.info {
width: 2428px; }
.application-detail-view section.info .header_right {
width: 2258px; } }
div.centralRow { div.centralRow {
margin-top: 65px; margin-top: 65px;
margin-bottom: 65px; } margin-bottom: 65px; }
@ -5912,23 +5971,34 @@ input.gv-radio-button {
margin-left: 10px; margin-left: 10px;
margin-top: 7px; } margin-top: 7px; }
.applicationDetailView section { .application-detail-view section.info {
float: left; float: left; }
width: 900px; } .application-detail-view section.info .header {
.applicationDetailView section .header {
float: left; float: left;
margin-bottom: 10px; } height: 200px;
.applicationDetailView section .header .header_left { margin-bottom: 10px;
float: left; position: relative; }
.application-detail-view section.info .header .header_left {
position: absolute;
width: 170px; width: 170px;
text-align: center; } text-align: center; }
.applicationDetailView section .header .header_left img { .application-detail-view section.info .header .header_left div.header-icon-container {
margin: 0px 0px 4px; } height: 160px;
.applicationDetailView section .header .header_right { margin: 0px 0px 4px;
float: left; width: 160px; }
clear: right; .application-detail-view section.info .header .header_left div.header-icon-container img.icon {
height: auto;
max-height: 160px;
max-width: 160px;
width: auto; }
.application-detail-view section.info .header .header_right {
position: relative;
left: 170px;
padding: 5px; } padding: 5px; }
.applicationDetailView section .header .header_right .license, .applicationDetailView section .header .header_right .version { .application-detail-view section.info .header .header_right h3 {
padding-right: 5px;
float: left; }
.application-detail-view section.info .header .header_right .license, .application-detail-view section.info .header .header_right .version {
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
@ -5938,10 +6008,12 @@ input.gv-radio-button {
font-size: 0.6em; font-size: 0.6em;
position: relative; position: relative;
top: -2px; } top: -2px; }
.applicationDetailView section .swagger iframe { .application-detail-view section.info .header .header_right .description {
clear: left; }
.application-detail-view section.info .swagger iframe {
width: 100%; width: 100%;
height: 600px; } height: 600px; }
.applicationDetailView aside { .application-detail-view aside.meta {
float: left; float: left;
clear: right; clear: right;
width: 200px; } width: 200px; }

4
js/apps/system/aardvark/frontend/scss/generated.css.map
View File

File diff suppressed because one or more lines are too long