design additions - notifier icons

pull/94/head
Hunter Long 2018-10-21 09:22:26 -07:00
parent b3a79a0115
commit e96036946c
18 changed files with 42 additions and 22 deletions

View File

@ -57,6 +57,7 @@ type Notification struct {
Description string `gorm:"-" json:"-"`
Author string `gorm:"-" json:"-"`
AuthorUrl string `gorm:"-" json:"-"`
Icon string `gorm:"-" json:"-"`
Delay time.Duration `gorm:"-" json:"-"`
Queue []interface{} `gorm:"-" json:"-"`
Running chan bool `gorm:"-" json:"-"`

View File

@ -37,7 +37,8 @@ func Router() *mux.Router {
r.Handle("/", http.HandlerFunc(indexHandler))
if source.UsingAssets(dir) {
indexHandler := http.FileServer(http.Dir(dir + "/assets/"))
r.PathPrefix("/css/").Handler(http.StripPrefix("/css/", http.FileServer(http.Dir(dir+"/assets/css"))))
r.PathPrefix("/css/").Handler(http.StripPrefix("/font/", http.FileServer(http.Dir(dir+"/assets/font"))))
r.PathPrefix("/font/").Handler(http.StripPrefix("/css/", http.FileServer(http.Dir(dir+"/assets/css"))))
r.PathPrefix("/robots.txt").Handler(indexHandler)
r.PathPrefix("/favicon.ico").Handler(indexHandler)
r.PathPrefix("/statup.png").Handler(indexHandler)
@ -46,6 +47,7 @@ func Router() *mux.Router {
r.PathPrefix("/robots.txt").Handler(http.FileServer(source.TmplBox.HTTPBox()))
r.PathPrefix("/favicon.ico").Handler(http.FileServer(source.TmplBox.HTTPBox()))
r.PathPrefix("/statup.png").Handler(http.FileServer(source.TmplBox.HTTPBox()))
r.PathPrefix("/font/").Handler(http.StripPrefix("/font/", http.FileServer(source.FontBox.HTTPBox())))
}
r.PathPrefix("/js/").Handler(http.StripPrefix("/js/", http.FileServer(source.JsBox.HTTPBox())))
r.Handle("/charts.js", http.HandlerFunc(renderServiceChartsHandler))

View File

@ -39,6 +39,7 @@ var discorder = &discord{&notifier.Notification{
AuthorUrl: "https://github.com/hunterlong",
Delay: time.Duration(5 * time.Second),
Host: "https://discordapp.com/api/webhooks/****/*****",
Icon: "fab fa-discord",
Form: []notifier.NotificationForm{{
Type: "text",
Title: "discord webhooker URL",

View File

@ -118,6 +118,7 @@ var emailer = &email{&notifier.Notification{
Description: "Send emails via SMTP when services are online or offline.",
Author: "Hunter Long",
AuthorUrl: "https://github.com/hunterlong",
Icon: "far fa-envelope",
Form: []notifier.NotificationForm{{
Type: "text",
Title: "SMTP Host",

View File

@ -39,6 +39,7 @@ var lineNotify = &lineNotifier{&notifier.Notification{
Description: "LINE Notify will send notifications to your LINE Notify account when services are offline or online. Baed on the <a href=\"https://notify-bot.line.me/doc/en/\">LINE Notify API</a>.",
Author: "Kanin Peanviriyakulkit",
AuthorUrl: "https://github.com/dogrocker",
Icon: "far fa-bell",
Form: []notifier.NotificationForm{{
Type: "text",
Title: "Access Token",

View File

@ -46,6 +46,7 @@ var slacker = &slack{&notifier.Notification{
AuthorUrl: "https://github.com/hunterlong",
Delay: time.Duration(10 * time.Second),
Host: "https://webhooksurl.slack.com/***",
Icon: "fab fa-slack",
Form: []notifier.NotificationForm{{
Type: "text",
Title: "Incoming webhooker Url",

View File

@ -39,6 +39,7 @@ var twilioNotifier = &twilio{&notifier.Notification{
Description: "Receive SMS text messages directly to your cellphone when a service is offline. You can use a Twilio test account with limits. This notifier uses the <a href=\"https://www.twilio.com/docs/usage/api\">Twilio API</a>.",
Author: "Hunter Long",
AuthorUrl: "https://github.com/hunterlong",
Icon: "fas fa-mobile-alt",
Delay: time.Duration(10 * time.Second),
Form: []notifier.NotificationForm{{
Type: "text",

View File

@ -41,6 +41,7 @@ var webhook = &webhooker{&notifier.Notification{
Description: "Send a custom HTTP request to a specific URL with your own body, headers, and parameters",
Author: "Hunter Long",
AuthorUrl: "https://github.com/hunterlong",
Icon: "fas fa-code-branch",
Delay: time.Duration(1 * time.Second),
Form: []notifier.NotificationForm{{
Type: "text",

View File

@ -43,8 +43,9 @@ HTML, BODY {
.container {
padding-top: 20px;
padding-bottom: 20px;
max-width: 860px; }
padding-bottom: 25px;
max-width: 860px;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.header-title {
color: #464646; }
@ -197,6 +198,9 @@ HTML, BODY {
.nav-pills A {
color: #424242; }
.nav-pills > i {
margin-right: 5px; }
.CodeMirror {
/* Bootstrap Settings */
box-sizing: border-box;

File diff suppressed because one or more lines are too long

View File

@ -24,8 +24,9 @@ HTML,BODY {
.container {
padding-top: 20px;
padding-bottom: 20px;
padding-bottom: 25px;
max-width: $max-width;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.header-title {
@ -231,6 +232,9 @@ HTML,BODY {
color: #424242;
}
.nav-pills > i {
margin-right: 5px;
}
.CodeMirror {
/* Bootstrap Settings */

View File

@ -32,6 +32,7 @@ var (
ScssBox *rice.Box // SCSS files from the 'source/scss' directory, this will be loaded into '/assets/scss'
JsBox *rice.Box // JS files from the 'source/js' directory, this will be loaded into '/assets/js'
TmplBox *rice.Box // HTML and other small files from the 'source/tmpl' directory, this will be loaded into '/assets'
FontBox *rice.Box // HTML and other small files from the 'source/tmpl' directory, this will be loaded into '/assets'
)
// Assets will load the Rice boxes containing the CSS, SCSS, JS, and HTML files.
@ -40,6 +41,7 @@ func Assets() {
ScssBox = rice.MustFindBox("scss")
JsBox = rice.MustFindBox("js")
TmplBox = rice.MustFindBox("tmpl")
FontBox = rice.MustFindBox("font")
}
// HelpMarkdown will return the Markdown of help.md into HTML

View File

@ -3,7 +3,7 @@
{{ if CoreApp.Footer}}
{{ CoreApp.Footer }}
{{ else }}
<a href="https://github.com/hunterlong/statup" target="_blank">Statup {{VERSION}} made with ❤️</a> | <a href="/dashboard">Dashboard</a>
<a href="https://github.com/hunterlong/statup" target="_blank">Statup {{VERSION}} made with <i class="text-danger fas fa-heart"></i></a> | <a href="/dashboard">Dashboard</a>
{{ end }}
</div>
{{ end }}

View File

@ -1,7 +1,7 @@
{{define "form_notifier"}}
{{$n := .Select}}
<form method="POST" class="{{underscore $n.Method }}" action="/settings/notifier/{{ $n.Method }}">
{{if $n.Title}}<h4>{{$n.Title}}</h4>{{end}}
{{if $n.Title}}<h4 class="text-capitalize">{{$n.Title}}</h4>{{end}}
{{if $n.Description}}<p class="small text-muted">{{safe $n.Description}}</p>{{end}}
{{range $n.Form}}
@ -41,21 +41,21 @@
<input type="hidden" name="notifier" value="{{underscore $n.Method }}">
<div class="col-12 col-sm-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
<button type="submit" class="btn btn-primary btn-block text-capitalize">Save</button>
<button type="submit" class="btn btn-primary btn-block text-capitalize"><i class="fa fa-check"></i> Save</button>
</div>
{{if $n.CanTest}}
<div class="col-12 col-sm-12">
<button class="test_notifier btn btn-secondary btn-block text-capitalize col-12 float-right">Test</button>
<button class="test_notifier btn btn-secondary btn-block text-capitalize col-12 float-right"><i class="fa fa-times"></i> Test</button>
</div>
<div class="col-12 col-sm-12 mt-2">
<div class="alert alert-danger d-none" id="{{underscore $n.Method}}-error" role="alert">
{{$n.Method}} has an error!
<i class="fa fa-exclamation-triangle"></i> {{$n.Method}} has an error!
</div>
<div class="alert alert-success d-none" id="{{underscore $n.Method}}-success" role="alert">
The {{$n.Method}} notifier is working correctly!
<i class="fa fa-smile-beam"></i> The {{$n.Method}} notifier is working correctly!
</div>
</div>
{{end}}
@ -64,7 +64,7 @@
{{if $n.Author}}
<span class="d-block small text-center mt-3 mb-5">
{{$n.Title}} Notifier created by <a href="{{$n.AuthorUrl}}" target="_blank">{{$n.Author}}</a>
<span class="text-capitalize">{{$n.Title}}</span> Notifier created by <a href="{{$n.AuthorUrl}}" target="_blank">{{$n.Author}}</a>
</span>
{{ end }}
</form>

View File

@ -6,10 +6,12 @@
<link rel="shortcut icon" type="image/x-icon" href="https://assets.statup.io/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://assets.statup.io/base.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
{{ else }}
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/font/all.css">
{{end}}
{{block "extra_css" .}} {{end}}
<title>{{block "title" .}} {{end}}</title>

View File

@ -18,12 +18,12 @@
<tbody class="sortable">
{{range .}}
<tr id="{{.Id}}">
<td><span class="drag_icon d-none d-md-inline">&#9776;</span> {{.Name}}</td>
<td><span class="drag_icon d-none d-md-inline"><i class="fas fa-bars"></i></span> {{.Name}}</td>
<td class="d-none d-md-table-cell">{{if .Online}}<span class="badge badge-success">ONLINE</span>{{else}}<span class="badge badge-danger">OFFLINE</span>{{end}} </td>
<td class="text-right">
<div class="btn-group">
<a href="/service/{{.Id}}" class="btn btn-primary">View</a>
<a href="/service/{{.Id}}/delete" class="btn btn-danger confirm-btn">Delete</a>
<a href="/service/{{.Id}}" class="btn btn-outline-secondary"><i class="fas fa-chart-area"></i> View</a>
<a href="/service/{{.Id}}/delete" class="btn btn-danger confirm-btn"><i class="fas fa-times"></i></a>
</div>
</td>
</tr>

View File

@ -6,12 +6,11 @@
<div class="row">
<div class="col-md-3 col-sm-12 mb-4 mb-md-0">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Settings</a>
<a class="nav-link" id="v-pills-style-tab" data-toggle="pill" href="#v-pills-style" role="tab" aria-controls="v-pills-style" aria-selected="false">Theme Editor</a>
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-cogs"></i> Settings</a>
<a class="nav-link" id="v-pills-style-tab" data-toggle="pill" href="#v-pills-style" role="tab" aria-controls="v-pills-style" aria-selected="false"><i class="fa fa-image"></i> Theme Editor</a>
{{ range .Notifications }}
<a class="nav-link text-capitalize" id="v-pills-{{underscore .Select.Method}}-tab" data-toggle="pill" href="#v-pills-{{underscore .Select.Method}}" role="tab" aria-controls="v-pills-{{underscore .Select.Method}}" aria-selected="false">{{.Select.Method}} <span class="badge badge-pill badge-secondary"></span></a>
<a class="nav-link text-capitalize" id="v-pills-{{underscore .Select.Method}}-tab" data-toggle="pill" href="#v-pills-{{underscore .Select.Method}}" role="tab" aria-controls="v-pills-{{underscore .Select.Method}}" aria-selected="false"><i class="{{.Select.Icon}}"></i> {{.Select.Method}}</a>
{{ end }}
<a class="nav-link" id="v-pills-browse-tab" data-toggle="pill" href="#v-pills-browse" role="tab" aria-controls="v-pills-home" aria-selected="false">Browse Plugins</a>
<a class="nav-link d-none" id="v-pills-backups-tab" data-toggle="pill" href="#v-pills-backups" role="tab" aria-controls="v-pills-backups" aria-selected="false">Backups</a>
{{ range .Plugins }}
<a class="nav-link text-capitalize" id="v-pills-{{underscore .Name}}-tab" data-toggle="pill" href="#v-pills-{{underscore .Name}}" role="tab" aria-controls="v-pills-profile" aria-selected="false">{{.Name}}</a>

View File

@ -17,8 +17,8 @@
<td>{{.Username}}</td>
<td class="text-right" id="user_{{.Id}}">
<div class="btn-group">
<a href="/user/{{.Id}}" class="btn btn-primary">Edit</a>
<a href="/user/{{.Id}}/delete" class="btn btn-danger confirm-btn" data-id="user_{{.Id}}">Delete</a>
<a href="/user/{{.Id}}" class="btn btn-outline-secondary"><i class="fas fa-user-edit"></i> Edit</a>
<a href="/user/{{.Id}}/delete" class="btn btn-danger confirm-btn" data-id="user_{{.Id}}"><i class="fas fa-times"></i></a>
</div>
</td>
</tr>