PR#230: Make bookmarks bar vertical - fedora-hubs

		`@@ -1,7 +1,7 @@`
		`@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);`

		`body {`
		`- background-color: #d1d3d4;`
		`+ background-color: #fff;`
		`}`

		`/*.super-header {`
		`@@ -57,16 +57,18 @@`
		`.header .dropdown.edit {`
		`top: 140px !important;`
		`}`
		`- .header h3.team {`
		`+ .header h2.team {`
		`top: 170px !important;`
		`}`
		`}`

		`- .header {`
		`- color: #ffffff;`
		`- background-color: #3c6eb4;`
		`+ header {`
		`+ color: #373a3c;`
		`+ background: #f3f3f3 none repeat scroll 0 0;`
		`width: 100%;`
		`font-family: 'Open Sans', sans-serif;`
		`+ min-height: 100px;`
		`+ border-bottom: 1px solid #ddd;`
		`}`

		`/*.header .dropdown.edit {`
		`@@ -75,45 +77,34 @@`
		`right: 0;`
		`z-index: 2;`
		`}*/`
		`+`
		`+ /* line up header with cards below */`
		`+ header .container {`
		`+ padding-left: 1.75rem !important;`
		`+ }`

		`- .header .img-wrap {`
		`- max-height: 100px;`
		`- overflow: hidden;`
		`- position: relative;`
		`- }`
		`-`
		`- .header .img-wrap img {`
		`- width: 100%;`
		`- text-align: center;`
		`- }`
		`-`
		`- .header h3.team {`
		`- position: absolute;`
		`- top: 120px;`
		`- left: 45%;`
		`- }`
		`-`
		`- .header img.avatar {`
		`+ header img.avatar {`
		`width: 70px;`
		`float: left;`
		`- margin: 0 15px;`
		`+ margin-right: 15px;`
		`display: inline;`
		`border: 5px solid #fff;`
		`}`

		`- .header h3 {`
		`- font-weight: 700;`
		`+ header h2 {`
		`+ font-weight: 500;`
		`+ padding-top: .5rem;`
		`}`

		`- .header a, .header a:hover, .header a:focus {`
		`+ header a, header a:hover, .header a:focus {`
		`color: #ffffff;`
		`}`

		`- .header span.edit {`
		`+ header span.edit {`
		`margin: 5px 5px 0 0;`
		`}`
		`.row {`
		`- padding: 5px;`
		`+ padding-top: 5px;`
		`margin: auto 0px;`
		`}`
		`.padded {`
		`@@ -148,6 +139,7 @@`
		`padding: 5px;`
		`/* TODO -- lots more nice styling here... */`
		`}`
		`+`
		`.panel {`
		`visibility: hidden;`
		`max-height: 0px;`
		`@@ -280,6 +272,28 @@`
		`.navbar-nav > li.idle-2years > a { color: #BBB; }`
		`.navbar-nav > li.idle-5years > a { color: #CCC; }`

		`+ .nav {`
		`+ background-color: #fcfcfc;`
		`+ padding: 1.5rem;`
		`+ position: absolute;`
		`+ z-index: 3;`
		`+ min-height: 200px;`
		`+ float: left;`
		`+ }`
		`+`
		`+ /* navbar fedora-bootstrap overrides to make it vertical */`
		`+`
		`+ .navbar-nav .nav-item {`
		`+ float: none;`
		`+ }`
		`+`
		`+ .navbar-nav .nav-item + .nav-item, .navbar-nav .nav-link + .nav-link {`
		`+ box-shadow: none;`
		`+ margin-left: 0px !important;`
		`+ }`
		`+`
		`+ /* end fedora-bootstrap nav overrides */`
		`+`
		`.media-object {`
		`max-width: 92px;`
		`max-height: 92px;`
		`@@ -374,3 +388,18 @@`
		`height: 2em;`
		`width: 2em;`
		`}`
		`+`
		`+`
		`+ / fedora bootstrap overrides /`
		`+`
		`+ / tightening up card headers - they are too fat imho /`
		`+ .card-header {`
		`+ padding: 0.3rem 0.5rem;`
		`+ }`
		`+`
		`+`
		`+ /** too much padding over the user's subheader, was attached to .m-b-1 with`
		`+ * !important so difficult to override **/`
		`+ header h5.m-b-1 {`
		`+ margin-top: 0.5rem!important;`
		`+ }`

hubs/templates/groups.html

file modified

+10 -6

		`@@ -3,12 +3,16 @@`
		`{% block title %}Groups{% endblock %}`
		`{% block content %}`

		`- <div class="header">`
		`- <div class="img-wrap">`
		`- <img src="#" />`
		`- </div>`
		`- <h3 class="team">Groups</h3>`
		`- </div>`
		`+ <header class="p-t-2">`
		`+ <div class="container">`
		`+ <div class="col-md-8">`
		`+ <h2 class="team m-b-0">Groups</h2>`
		`+ <h5 class="m-t-1 m-b-1">Summary of available team hubs</h5>`
		`+ </div>`
		`+ <div class="col-md-4 header-right">`
		`+ </div>`
		`+ </header>`
		`+`
		`<div class="container">`
		`<div class="row">`
		`</div>`

hubs/templates/hubs.html

file modified

+50 -43

		`@@ -2,51 +2,26 @@`

		`{% block title %}{{ hub.name }}{% endblock %}`
		`{% block content %}`
		`- <div class="header">`
		`- {% if hub.user_hub %}`
		`- <div class="padded center-block medium-wide">`
		`- <img src="{{ hub.avatar }}" class="avatar" />`
		`- <h3>{{ hub.name }}</h3>`
		`- <h5>{{ hub.summary }}</h5>`
		`- <div class="clearfix"></div>`
		`- </div>`
		`- {% else %}`
		`- <div class="img-wrap">`
		`- <img src="{{ hub.header_img }}" />`
		`- </div>`
		`- <h3 class="team">{{ hub.name }}</h3>`
		`- {% endif %}`
		`- </div>`

		`- {%- with messages = get_flashed_messages(with_categories=true) -%}`
		`- {%- if category, messages -%}`
		`- <div class="container">`
		`- <div class="row">`
		`- <div class="col-md-6 col-md-offset-3">`
		`- <ul id="flashes" class="list-group">`
		`- {%- for category, message in messages -%}`
		`- <div class="alert {%`
		`- if category == 'error' %}alert-warning{%`
		`- else %}alert-info{%`
		`- endif %} alert-dismissible" role="alert">`
		`- <button type="button" class="close" data-dismiss="alert"`
		`- aria-label="Close">`
		`- <span aria-hidden="true">×</span>`
		`- <span class="sr-only">Close</span>`
		`- </button>`
		`- {{ message }}`
		`- </div>`
		`- {%- endfor -%}`
		`- </ul>`
		`- </div>`
		`+ <header class="p-t-2">`
		`+ <div class="container">`
		`+`
		`+ <!-- Left side of header -->`
		`+ <div class="col-md-8">`
		`+ {% if hub.user_hub %}`
		`+ <img src="{{ hub.avatar }}" class="avatar" />`
		`+ <h2 class="user m-b-0">{{ hub.name }}</h2>`
		`+ <h5 class="m-t-1 m-b-1">{{ hub.summary }}</h5>`
		`+ <div class="clearfix"></div>`
		`+ {% else %}`
		`+ <h2 class="team">{{ hub.name }}</h2>`
		`+ <h5 class="m-t-1 m-b-1">{{ hub.summary }}</h5>`
		`+ {% endif %}`
		`</div>`
		`- </div>`
		`- {%- endif -%}`
		`- {%- endwith -%}`

		`- <div class="container">`
		`- {% if g.auth.logged_in and hub.is_admin(g.auth.user) %}`
		`- <div class="row">`
		`+ <!-- right side of header -->`
		`+ <div class="col-md-4 header-right">`
		`+ {% if g.auth.logged_in and hub.is_admin(g.auth.user) %}`
		`{% if not edit %}`
		`<div class="dropdown edit pull-xs-right showpointer">`
		`<span class="dropdown-toggle edit-this-page" type="button"`
		`@@ -75,11 +50,43 @@`
		`Save changes`
		`</div>`
		`{% endif %}`
		`+ {% endif %}`
		`</div>`
		`- {% endif %}`
		`+ </div>`
		`+`
		`+ </header>`
		`+`

		`+ {%- with messages = get_flashed_messages(with_categories=true) -%}`
		`+ {%- if category, messages -%}`
		`+ <div class="container">`
		`+ <div class="row">`
		`+ <div class="col-md-6 col-md-offset-3">`
		`+ <ul id="flashes" class="list-group">`
		`+ {%- for category, message in messages -%}`
		`+ <div class="alert {%`
		`+ if category == 'error' %}alert-warning{%`
		`+ else %}alert-info{%`
		`+ endif %} alert-dismissible" role="alert">`
		`+ <button type="button" class="close" data-dismiss="alert"`
		`+ aria-label="Close">`
		`+ <span aria-hidden="true">×</span>`
		`+ <span class="sr-only">Close</span>`
		`+ </button>`
		`+ {{ message }}`
		`+ </div>`
		`+ {%- endfor -%}`
		`+ </ul>`
		`+ </div>`
		`+ </div>`
		`+ </div>`
		`+ {%- endif -%}`
		`+ {%- endwith -%}`

		`+ <div class="container">`
		`+`
		`<div class="row">`
		`+`
		`<div class="col-md-{{ hub.left_width }}">`
		`<!--`
		`First, before the proper widgets.. a cobweb built-in widget.`

hubs/templates/master.html

file modified

+12 -6

		`@@ -54,16 +54,18 @@`
		`</div>`
		`<div class="bodycontent">`

		`- <nav class="navbar navbar-light navbar-underline p-t-0 p-b-0">`
		`+`
		`+ <div class="col-md-2">`
		`+ <nav class="navbar navbar-light p-t-2 p-b-0">`
		`<button type="button" class="navbar-toggler hidden-sm-up"`
		`data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">`
		`<span class="sr-only">Toggle navigation</span>`
		`<span class="oi" data-glyph="menu"></span>`
		`</button>`

		`- <!-- Collect the nav links, forms, and other content for toggling -->`
		`- <div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">`
		`- <ul class="nav navbar-nav nav-underline">`
		`+ <!-- Collect the nav links, forms, and other content for toggling -->`
		`+ <div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">`
		`+ <ul class="nav navbar-nav">`
		`{% if g.auth.logged_in %}`
		`<li class="p-x-1 nav-item {% if request.path.endswith('/' + g.auth.user.username + '/') %}active{% endif %}">`
		`<a class="nav-link" href="/{{g.auth.user.username}}">me</a></li>`
		`@@ -72,11 +74,15 @@`
		`<a class="nav-link" href="/{{hub.name}}">{{hub.name}}</a></li>`
		`{% endfor %}`
		`<!-- At the end of the list, tack on a link to all groups -->`
		`- <li class="p-x-1 nav-item"><a class="nav-link" href="/groups">all</a></li>`
		`+`
		`+ <li class="p-x-1 nav-item"><a class="nav-link" href="/groups">all</a></li>`
		`{% endif %}`
		`</ul>`
		`- </div><!-- /.navbar-collapse -->`
		`+ </div><!-- /.navbar-collapse -->`
		`</nav>`
		`+`
		`+ </div>`
		`+`
		`{% block content %}{% endblock %}`

		`</div> <!--end bodycontent-->`

duffy commented 7 years ago

This makes the bookmarks bar vertical and cleans up some style issues that the vertical bookmarks bar exposed.

duffy commented 7 years ago

http://i.imgur.com/AsZ8MMJ.png

skrzepto commented 7 years ago

Could we get the buttons to have have the same width or no?

atelic commented on line 11 of hubs/templates/groups.html 7 years ago

Semantic markup :) :thumbsup:

atelic commented on line 68 of hubs/templates/hubs.html 7 years ago

Indentation mistake here?

radhikamani88 commented 7 years ago

perhaps margin and outset ?

duffy commented 7 years ago

skrzepto - i'm going to work on the buttons but in a different PR... figured i'd try to separate the work into logical chunks, so this one is just for the vertical bookmarks bar related stuff

duffy commented 7 years ago

atelic - yep whoops! missed that indentation, will fix now

skrzepto commented 7 years ago

@duffy

oops sorry about that :P just noticed the top left. No worries :)

atelic commented 7 years ago

This looks really nice. Just a couple of quesitons about the indentation. It looks like tabs are mixed with spaces some here. example. another.. I think our standard it to have two spaces for html/css/js files.

1 new commit added

minor indentation fix

7 years ago

duffy commented 7 years ago

you know what i think happened with the tabs/spcaes... my editor (geany) has them set up right but i had a merge conflict when i was rebasing and i did those fixes in vim... lol. ill go thru and clean up the tabs.

1 new commit added

fixing indentation

7 years ago

atelic commented 7 years ago

:thumbsup: from me. @pingou might have a comment about the commit history though. I think the policy is to not have merge commits but rather a linear history.

rebased

7 years ago

Pull-Request has been merged by duffy

7 years ago