Skip to content

Commit 5c28039

Browse files
yasulabyasulab
authored
Merge pull request #907 from coderdojo-japan/shared-header-navbar
Kata ページのヘッダーを共通化
2 parents aa2d583 + c83d616 commit 5c28039

File tree

4 files changed

+84
-52
lines changed

4 files changed

+84
-52
lines changed

‎app/assets/stylesheets/extension/header.scss

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,21 @@ body {
3131
font-size: 14px;
3232
font-weight: bold;
3333
line-height: 26px;
34+
&:hover{
35+
color: #fff;
36+
}
3437
}
35-
.collapse > .navbar-nav > li > a {
38+
.collapse > .navbar-nav > li {
3639
position: relative;
3740
&:hover {
38-
color: #fff;
3941
&:before, &:after {
4042
width: 40%;
4143
}
4244
}
4345
}
4446

45-
.collapse > .navbar-nav > li > a:before,
46-
.collapse > .navbar-nav > li > a:after {
47+
.collapse > .navbar-nav > li:before,
48+
.collapse > .navbar-nav > li:after {
4749
position: absolute;
4850
bottom: 10px;
4951
content: "";
@@ -52,10 +54,10 @@ body {
5254
background-color: #fff;
5355
transition: 0.2s;
5456
}
55-
.collapse > .navbar-nav > li > a:before {
57+
.collapse > .navbar-nav > li:before {
5658
left: 50%;
5759
}
58-
.collapse > .navbar-nav > li > a:after {
60+
.collapse > .navbar-nav > li:after {
5961
right: 50%;
6062
}
6163
.navbar-toggle {
@@ -70,13 +72,55 @@ body {
7072
background-color: #0466c9;
7173
}
7274
}
75+
.nav > .navbar-dd-p {
76+
&> a {
77+
display: inline-block;
78+
padding-right: 0;
79+
}
80+
&:hover > .navbar-dd {
81+
display: block;
82+
}
83+
}
84+
.navbar-dd {
85+
display: none;
86+
position: absolute;
87+
list-style: none;
88+
top: 50px;
89+
padding: 10px 0 8px 0;
90+
background: #2275CA;
91+
width: 120px;
92+
a {
93+
color: #fff;
94+
padding: 4px 12px;
95+
display: block;
96+
text-decoration: none;
97+
&:hover {
98+
background: #66a2df;
99+
}
100+
}
101+
}
102+
.navbar-dd-l {
103+
display: inline-block;
104+
margin-bottom: 2px;
105+
&::before {
106+
content: '';
107+
display: block;
108+
width: 0;
109+
height: 0;
110+
border-left: 5px solid transparent;
111+
border-right: 5px solid transparent;
112+
border-top: 6px solid #fff;
113+
color: #fff;
114+
margin-right: 15px;
115+
}
116+
}
73117
@media only screen and (max-width:950px) {
74118
.collapse > .navbar-nav > li > a {
75119
padding: 15px 8px;
76120
}
77121
}
78122

79-
@media only screen and (max-width:840px) {
123+
@media only screen and (max-width:865px) {
80124
.container-fluid {
81125
padding: 5px 10px;
82126
}
@@ -98,6 +142,15 @@ body {
98142
}
99143

100144
@media only screen and (max-width:768px){
145+
.navbar-dd {
146+
display: block;
147+
position: static;
148+
padding: 0 2rem;
149+
width: 100%;
150+
}
151+
.navbar-dd-l {
152+
display: none;
153+
}
101154
#header-logo img {
102155
margin-left: 15px;
103156
}
@@ -110,11 +163,14 @@ body {
110163
color: #cce3f9;
111164
}
112165
}
113-
.collapse > .navbar-nav > li > a:before,
114-
.collapse > .navbar-nav > li > a:after {
166+
.collapse > .navbar-nav > li:before,
167+
.collapse > .navbar-nav > li:after {
115168
content: none;
116169
}
117170
.navbar-toggle {
118171
padding: 12px;
119172
}
173+
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
174+
max-height: 540px;
175+
}
120176
}

‎app/views/layouts/application.html.haml

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99

1010
%title= full_title(yield(:title))
1111
= stylesheet_link_tag 'application', 'data-turbolinks-track' => true, media: 'all'
12-
- unless is_kata?
13-
= stylesheet_link_tag 'extension/header', 'data-turbolinks-track' => true, media: 'all'
12+
= stylesheet_link_tag 'extension/header', 'data-turbolinks-track' => true, media: 'all'
1413
= javascript_include_tag 'application', 'data-turbolinks-track' => true
1514
= csrf_meta_tags
1615
= scrivito_head_tags if using_scrivito?
@@ -62,11 +61,10 @@
6261

6362
/ at the end of the HEAD
6463
- if is_kata?
65-
%link{:href => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", :rel => "stylesheet"} if is_kata?
64+
%link{:href => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", :rel => "stylesheet"}
6665

6766
%body
68-
- unless is_kata?
69-
= render 'shared/header'
67+
= render 'shared/header'
7068
- flash.each do |message_type, message|
7169
%div{:class => "alert alert-#{message_type}"}= message
7270
= yield

‎app/views/plain_page/index.html.haml

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,6 @@
11
%body
22
- if @obj && !@obj.permalink.nil?
3-
/ Navigation
4-
%nav.navbar.navbar-default.navbar-custom.navbar-fixed-top
5-
.container-fluid
6-
/ Brand and toggle get grouped for better mobile display
7-
.navbar-header.page-scroll
8-
%button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
9-
%span.sr-only Toggle navigation
10-
目次
11-
%i.fa.fa-bars
12-
%a.navbar-brand{:href => "#top"} CoderDojo Kata
13-
/ Collect the nav links, forms, and other content for toggling
14-
#bs-example-navbar-collapse-1.collapse.navbar-collapse
15-
%ul.nav.navbar-nav.navbar-right
16-
/ DocSearch: https://github.com/algolia/docsearch-configs/blob/master/configs/coderdojo.json
17-
%li.search
18-
%input#searchbox{ :placeholder => "🔍 検索", :type => "text" }
19-
#hits
20-
#pagination
21-
%li
22-
%a{:href => "#README"} はじめに
23-
%li
24-
%a{:href => "#learn"} 学ぶ
25-
%li
26-
%a{:href => "#challenge"} 腕試し
27-
%li
28-
%a{:href => "#startup"} 立ち上げる
29-
%li
30-
%a{:href => "#support"} 支援
31-
%li
32-
%a{:href => "#faq"} FAQ
33-
/ /.navbar-collapse
34-
/ /.container
35-
/ Page Header
3+
364
/ Set your background image for this header on the line below.
375
%header.intro-header{:style => "padding-top: 100px; background-image: url('img/kata-cover.png')"}
386
.container
@@ -41,10 +9,10 @@
419
.post-heading
4210
%h1 CoderDojo Kata
4311
%h2.subheading 道場情報まとめ
44-
45-
/ Post Content
46-
%article
47-
.container
12+
13+
/ Post Content
14+
%article
15+
.container
4816
.row
4917
.col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1.fontsize-bigger
5018
/ Navigator

‎app/views/shared/_header.html.haml

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,15 @@
1717
%li= link_to 'パートナー法人', '/#partners'
1818
%li= link_to '統計情報', '/stats'
1919
%li= link_to 'News', '/#news'
20-
%li= link_to 'Kata', '/kata'
20+
%li.navbar-dd-p
21+
= link_to 'Kata', '/kata'
22+
%span.navbar-dd-l
23+
%ul.navbar-dd
24+
%li= link_to 'はじめに', '/kata#README'
25+
%li= link_to '学ぶ', '/kata#learn'
26+
%li= link_to '腕試し', '/kata#challenge'
27+
%li= link_to '立ち上げる', '/kata#startup'
28+
%li= link_to '支援', '/kata#support'
29+
%li= link_to 'FAQ', '/kata#faq'
30+
2131
%li= link_to 'お問い合わせ', '/#contact'

0 commit comments

Comments
 (0)