Skip to content
This repository has been archived by the owner on Mar 16, 2020. It is now read-only.

UI refactoring for better mobile experience #324

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 39 additions & 24 deletions app/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,9 @@
.top-margin {
margin-top: 20px;
}
div.navbar-header {
width: 21em;
}
a.navbar-brand {
background-image: url("/static/icon.png");
background-repeat: no-repeat;
Expand Down Expand Up @@ -197,6 +200,9 @@
#story-list {
position: static;
}
#story-list.no-nav {
margin-left: 3px !important;
}
.story-header {
padding: 0;
height: 43px;
Expand All @@ -210,6 +216,10 @@
margin-top: 0;
margin-bottom: 0;
}
li.dropdown {
margin-left: 3px;
margin-right: 3px;
}
}
</style>
<link rel="shortcut icon" href="/static/favicon.png">
Expand All @@ -223,13 +233,23 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" ng-click="shown = '{{if .User}}feeds{{end}}'">go read</a>
<a class="navbar-brand" href="#" ng-click="{{if .User}}refresh(){{end}}">go read</a>
{{if .User}}
<button
id="refresh"
class="btn btn-default navbar-btn btn-sm"
ng-click="refresh()"
data-url-feeds="{{url "list-feeds"}}"
><i class="fa fa-refresh"></i></button>
{{end}}
<div class="btn-group">
<button class="btn btn-default navbar-btn btn-sm" ng-click="next()" ng-disabled="stories.length == 0"><i class="fa fa-chevron-down"></i></button>
<button class="btn btn-default navbar-btn btn-sm" ng-click="prev()" ng-disabled="stories.length == 0"><i class="fa fa-chevron-up"></i></button>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: shown == 'about'}"><a href="#" ng-click="shown = 'about'">about</a></li>
{{if .User}}
<li ng-class="{active: shown == 'feeds'}" ng-init="shown = 'feeds'"><a href="#" ng-click="shown = 'feeds'; setActive();">feeds</a></li>
<li ng-click="shown = 'feeds'" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span ng-show="opts.mode == 'unread'">{{`{{unread.current || 'no'}}`}} unread items</span>
Expand All @@ -242,26 +262,6 @@
</ul>
</li>
<li>
<button
id="mark-all-read"
class="btn btn-default navbar-btn btn-sm"
ng-click="markAllRead()"
ng-disabled="stories.length == 0"
data-url-read="{{url "mark-read"}}"
data-url-unread="{{url "mark-unread"}}"
data-url-contents="{{url "get-contents"}}"
data-url-star="{{url "set-star"}}"
>mark all read</button>
<button
id="refresh"
class="btn btn-default navbar-btn btn-sm"
ng-click="refresh()"
data-url-feeds="{{url "list-feeds"}}"
><i class="fa fa-refresh"></i></button>
<div class="btn-group">
<button class="btn btn-default navbar-btn btn-sm" ng-click="next()" ng-disabled="stories.length == 0"><i class="fa fa-chevron-down"></i></button>
<button class="btn btn-default navbar-btn btn-sm" ng-click="prev()" ng-disabled="stories.length == 0"><i class="fa fa-chevron-up"></i></button>
</div>
<div class="btn-group">
<a href="#" class="btn btn-default navbar-btn btn-sm dropdown-toggle" data-toggle="dropdown">
view
Expand Down Expand Up @@ -297,9 +297,24 @@
</li>
</ul>
</div>
<div class="btn-group">
<button
id="mark-all-read"
class="btn btn-default navbar-btn btn-sm"
ng-click="markAllRead()"
ng-disabled="stories.length == 0"
data-url-read="{{url "mark-read"}}"
data-url-unread="{{url "mark-unread"}}"
data-url-contents="{{url "get-contents"}}"
data-url-star="{{url "set-star"}}"
>mark all read</button>
</div>
</li>
<li><a ng-show="loading" style="position: absolute">loading...</a></li>
<li>&#160;</li>
<li ng-class="{active: shown == 'feeds'}" ng-init="shown = 'feeds'"><a href="#" ng-click="shown = 'feeds'; setActive();">feeds</a></li>
{{end}}
<li ng-class="{active: shown == 'about'}"><a href="#" ng-click="shown = 'about'">about</a></li>
<li><a ng-show="loading" style="position: absolute">loading...</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" id="nav-right">
{{if .User}}
Expand Down