Optimizing page style

This commit is contained in:
cuigh 2018-04-03 20:41:03 +08:00
parent e48578b5f8
commit 2d08f97cb6
2 changed files with 43 additions and 35 deletions

View File

@ -24,7 +24,7 @@
<div class="level-item has-text-centered">
<div>
<p class="heading">{{text}}</p>
<p class="title"><a href="{{url}}" style="text-decoration: none">{{count}}</a></p>
<p class="title"><a href="{{url}}" style="text-decoration: none; color: white">{{count}}</a></p>
</div>
</div>
</div>
@ -39,6 +39,7 @@
{{end}}
{{ block body() }}
{*{{ if !.Charts }}*}
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container has-text-centered">
@ -57,40 +58,43 @@
</div>
</div>
</section>
{*{{ end }}*}
<section class="section">
<div class="notification is-warning is-hidden">
WARNING: Swirl is running on basic mode now, some features are disabled. You can enable full features by configuring database.
</div>
<div class="columns">
{{yield infobox(style="success", icon="cubes", text=i18n("home.node"), url="/node/", count=.NodeCount)}}
{{yield infobox(style="info", icon="globe", text=i18n("home.network"), url="/network/", count=.NetworkCount)}}
{{yield infobox(style="danger", icon="ticket-alt", text=i18n("home.service"), url="/service/", count=.ServiceCount)}}
{{yield infobox(style="primary", icon="server", text=i18n("home.stack"), url="/stack/task/", count=.StackCount)}}
</div>
<hr>
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>{{ i18n("home.monitor") }}</strong>
</p>
</div>
<section class="hero is-light is-small">
<div class="hero-body">
<div class="columns">
{{yield infobox(style="success", icon="cubes", text=i18n("home.node"), url="/node/", count=.NodeCount)}}
{{yield infobox(style="info", icon="globe", text=i18n("home.network"), url="/network/", count=.NetworkCount)}}
{{yield infobox(style="danger", icon="ticket-alt", text=i18n("home.service"), url="/service/", count=.ServiceCount)}}
{{yield infobox(style="primary", icon="server", text=i18n("home.stack"), url="/stack/task/", count=.StackCount)}}
</div>
<div class="level-right">
<div class="level-item">
<button id="btn-add" class="button is-success">
<span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.add") }}</span>
</button>
</div>
</section>
<section class="hero is-small">
<div class="hero-body">
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>{{ i18n("home.monitor") }}</strong>
</p>
</div>
</div>
<div class="level-item">
<button id="btn-save" class="button is-info">
<span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save") }}</span>
</button>
<div class="level-right">
<div class="level-item">
<div class="buttons has-addons">
<button id="btn-add" class="button">
<span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.add") }}</span>
</button>
<button id="btn-save" class="button">
<span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save") }}</span>
</button>
</div>
</div>
</div>
</div>
</nav>
<div id="div-charts" class="columns is-multiline">
</nav>
<div id="div-charts" class="columns is-multiline"></div>
</div>
</section>

View File

@ -80,10 +80,14 @@
</form>
<div class="level-right">
<div class="level-item">
<button id="btn-add" class="button is-success"><span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.add") }}</span></button>
</div>
<div class="level-item">
<button id="btn-save" class="button is-info"><span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save") }}</span></button>
<div class="buttons has-addons">
<button id="btn-add" class="button">
<span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.add") }}</span>
</button>
<button id="btn-save" class="button">
<span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save") }}</span>
</button>
</div>
</div>
</div>
</nav>