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

UI refactoring for better mobile experience #324

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cf7a1e
UI refactoring for better mobile experience
mblakele Dec 16, 2014
bf84d67
moved story-list margin to narrow-screen media scope, per code review
mblakele Dec 23, 2014
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
61 changes: 37 additions & 24 deletions app/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
}
#story-list.no-nav {
left: 20px;
margin-left: 3px !important;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should go in the media query.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense: I've moved that in bf84d67

}
#story-list .config {
margin-right: 20px;
Expand Down Expand Up @@ -163,6 +164,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 @@ -210,6 +214,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 +231,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 +260,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 +295,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