[WIP] Navigation #35

Gushsd · 2017-07-05T19:15:27Z

Updated header's links according to flexboxgrid framework.
Development of a dropdown menu project.

Gushsd · 2017-07-26T15:21:32Z

New changes of layout in Dropdown-Submenu under 'Community' and 'About' (essentially in the classes .submenu and .dropdown)

autarc · 2017-07-26T15:58:37Z

_sass/base/_layout.scss

 	padding-top: 0.25em;
 	margin-top: 10px;
-  padding: 0px 10px;
+ 	padding: 0px 10px;


For consistency we should probably stick with one formatting option - either 0px or 0. Both are valid although I would tend for the later as the unit is irrelevant for this value. What do you think? 😉

Hey Steffan, thanks for the comment. Yes, I agree. The unity then doesn't make any difference. We then stick to just '0' from now on!

autarc · 2017-07-26T16:03:06Z

scripts/ots-app.js

+    dropdownOpen : function() {
+      $('.dropdown').on('click', 'a', function(event){
+        var target = event.target
+        if($(target).parent().hasClass('open')){


Instead of checking the class state yourself, how about using the .toggleClass(className) method of jQuery? It might be easier to read and is also results in less code to maintain 😄

Gushsd · 2017-08-22T21:50:46Z

We further improved features and styling in the submenu through the classes .dropdown and .submenu. Icons from FontAwesome were added (dropdown arrow and close sign; the 3 social links).

gsambrotta

Generally looks good!
I still have to see how it look like but i start to write down some code improvments!
Let me know if anything is not clear 😃

gsambrotta · 2017-08-23T21:27:23Z

_data/nav.yml

+    url: /about/drive
+  - title: "Contact"
+    url: /about/contact


can you insert a new empty line here please? Thanks!

gsambrotta · 2017-08-23T21:30:20Z

_includes/_render_nav.html

+
+		{% endif %}
+
+	{% endif %}
 {% endfor %}


Also here, can we insert a new line?
I think this file also need a nice formatting. Can you please check that the indentation is done with 2 spaces and no 4 tabs? And that there are no random empty lines or weird indentation. Thanks :)

gsambrotta · 2017-08-23T21:33:51Z

_includes/head.html

@@ -15,6 +15,7 @@

  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


Let's move this line before we call our main.css file.
In this way our css will be called after the library one.
This means our styles will be always the last one so will be the one that actually is applied. (so if we want to override some libraries style, we can do it ;) )

gsambrotta · 2017-08-23T21:34:41Z

_includes/header.html

-        <ul class="main row col-xs-9 between-xs">
-          {% include _render_nav.html nav=site.data.nav.main %}
-        </ul>
+      <div class="main row between-xs col-xs-6">


Did we check how this look like in mobile? Does it need some adjustment or is good?

Hmmm.. It looks... under construction.. With the 'toggle device' tool you can only have a little notion of the final effect I think... There is no way we can run the test page on a real smartphone? Can I generate the link some how so I could open in another device than the computer rendering the site through Jekyll? I doubt it...
I'll play with it a bit more and see if it should be changed..

Gushsd · 2017-09-06T19:42:43Z

_sass/base/_layout.scss

+			a {
+				color: white;
+				background-color: $brand-color;
+				padding: 8px;


(funny now, commenting myself.. kind of schizophrenic) I just realized that this line is breaking the alignment between the parent links in the menu. So I have to figure out a way of changing this padding-style change without breaking the original alignment.... Anyone has any ideas?

gsambrotta · 2017-09-12T18:02:27Z

Hey @Gushsd i check the branch, we are getting there :D
I leave some comments here that we need to work on:

social icons needs to open in a new lin k (check target='_blank')
text is not vertically align with social icons
font should be little bigger
arrow/cross little bit more to the right
donate button should be pinky and with border like in the design
is just me or the header background is blu-his instead of white?

Let's keep this design mockup as guideline:
https://www.figma.com/proto/MHyUqUq6gd5EuGuIBerw2Z76/OTS-latest-design?scaling=min-zoom&redirected=1&node-id=2%3A2

I personally think you can change those stuff listed above, by your self. You know how to do it :)

About mobile, i forgot that we need to do the mobile/hamburger menu but we can have a look it together.

autarc · 2017-09-13T21:25:33Z

scripts/ots-app.js

+
+    dropdownOpen : function() {
+      $('.dropdown').on('click', 'a', function(event){
+        var target = event.target


Are we going to use JavaScript Standard Style? Looks like some Semicolons are missing or omitted on purpose. Guess its better to stick with inserting them after a statement to ensure consistency 😉

Gushsd added 8 commits May 29, 2017 21:50

Header background and logo colors

034b930

fixed merge conflict

4a75289

Bold logo and all the menu items in 1 line/ul

dc74ffb

Header height, navigation flexbox

bac83b0

Replacement of test class .flexbox-container for actual flexbox classes

46fa308

Initial steps for dropdown-menu

22263b1

Style changes on submenu for <a> Community</a> and <a>About</a>

4ca8e3e

Layout style changes on submenu

1d9685e

autarc reviewed Jul 26, 2017

View reviewed changes

Gushsd added 4 commits August 2, 2017 20:29

Used .toggleClass() inside .dropdown

86ee542

Used .siblings().removeClass() inside .dropdown

6bcb4b4

Inserted dropdown icon

8be5610

Styling of inserted icons, Social icons, hover effect

2003183

gsambrotta requested changes Aug 23, 2017

View reviewed changes

small editing and identation changes

53c3920

Gushsd commented Sep 6, 2017

View reviewed changes

small styling, added facebook link, added target=_blank to social links

a1e26cc

autarc reviewed Sep 13, 2017

View reviewed changes

gsambrotta and others added 4 commits September 17, 2017 17:04

mobile/desktop menu

e0316e9

style menu

1cdb516

finish menu desktop

938d1a6

Fine tuning of responsive menu in media-query for smartphones

59aaab7

gsambrotta approved these changes Oct 22, 2017

View reviewed changes

gsambrotta merged commit fc2a821 into master Oct 22, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Navigation #35

[WIP] Navigation #35

Gushsd commented Jul 5, 2017

Gushsd commented Jul 26, 2017

autarc Jul 26, 2017

Gushsd Aug 2, 2017

autarc Jul 26, 2017

Gushsd commented Aug 22, 2017

gsambrotta left a comment

gsambrotta Aug 23, 2017

gsambrotta Aug 23, 2017

gsambrotta Aug 23, 2017

Gushsd Aug 30, 2017

gsambrotta Aug 23, 2017

Gushsd Aug 30, 2017

Gushsd Sep 6, 2017

gsambrotta commented Sep 12, 2017 •

edited

autarc Sep 13, 2017

[WIP] Navigation #35

[WIP] Navigation #35

Conversation

Gushsd commented Jul 5, 2017

Gushsd commented Jul 26, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Gushsd commented Aug 22, 2017

gsambrotta left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gsambrotta commented Sep 12, 2017 • edited

Choose a reason for hiding this comment

gsambrotta commented Sep 12, 2017 •

edited