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 class="level-item has-text-centered">
<div> <div>
<p class="heading">{{text}}</p> <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> </div>
</div> </div>
@ -39,6 +39,7 @@
{{end}} {{end}}
{{ block body() }} {{ block body() }}
{*{{ if !.Charts }}*}
<section class="hero is-primary is-bold"> <section class="hero is-primary is-bold">
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container has-text-centered">
@ -57,18 +58,21 @@
</div> </div>
</div> </div>
</section> </section>
{*{{ end }}*}
<section class="section"> <section class="hero is-light is-small">
<div class="notification is-warning is-hidden"> <div class="hero-body">
WARNING: Swirl is running on basic mode now, some features are disabled. You can enable full features by configuring database.
</div>
<div class="columns"> <div class="columns">
{{yield infobox(style="success", icon="cubes", text=i18n("home.node"), url="/node/", count=.NodeCount)}} {{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="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="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)}} {{yield infobox(style="primary", icon="server", text=i18n("home.stack"), url="/stack/task/", count=.StackCount)}}
</div> </div>
<hr> </div>
</section>
<section class="hero is-small">
<div class="hero-body">
<nav class="level is-mobile"> <nav class="level is-mobile">
<div class="level-left"> <div class="level-left">
<div class="level-item"> <div class="level-item">
@ -79,18 +83,18 @@
</div> </div>
<div class="level-right"> <div class="level-right">
<div class="level-item"> <div class="level-item">
<button id="btn-add" class="button is-success"> <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> <span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.add") }}</span>
</button> </button>
</div> <button id="btn-save" class="button">
<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> <span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save") }}</span>
</button> </button>
</div> </div>
</div> </div>
</div>
</nav> </nav>
<div id="div-charts" class="columns is-multiline"> <div id="div-charts" class="columns is-multiline"></div>
</div> </div>
</section> </section>

View File

@ -80,10 +80,14 @@
</form> </form>
<div class="level-right"> <div class="level-right">
<div class="level-item"> <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 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 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> </div>
</div> </div>
</nav> </nav>