From 1ca1a3f90046761a0a13c3801c0c16ffa5a11a22 Mon Sep 17 00:00:00 2001 From: Yuki Mihashi <31533303+yuki384@users.noreply.github.com> Date: Wed, 29 Jul 2020 16:13:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Kata=E3=83=89=E3=83=AD=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=83=80=E3=82=A6=E3=83=B3=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/stylesheets/extension/header.scss | 45 ++++++++++++++++++++ app/views/layouts/application.html.haml | 8 ++-- app/views/plain_page/index.html.haml | 42 +++--------------- app/views/shared/_header.html.haml | 13 +++++- 4 files changed, 65 insertions(+), 43 deletions(-) diff --git a/app/assets/stylesheets/extension/header.scss b/app/assets/stylesheets/extension/header.scss index 316ddd01e..e7afa38d6 100644 --- a/app/assets/stylesheets/extension/header.scss +++ b/app/assets/stylesheets/extension/header.scss @@ -70,6 +70,51 @@ body { background-color: #0466c9; } } +.nav > .navbar-dd-p { + &> a { + display: inline-block; + padding-right: 0; + } +} +.navbar-dd { + display: none; + position: absolute; + list-style: none; + top: 60px; + padding: 0 0 8px 0; + background: #2275CA; + width: 120px; + a { + color: #fff; + padding: 4px 12px; + display: block; + text-decoration: none; + &:hover { + background: #66a2df; + } + } +} +.navbar-dd-c { + display: none; + &:checked ~ .navbar-dd { + display: block; + } + &:checked ~ .navbar-dd-l::before { + content: '\f0d8'; + } +} +.navbar-dd-l { + cursor: pointer; + &:hover:before { + opacity: .8; + } + &::before { + content: '\f0d7'; + font-family: 'Font Awesome 5 Free'; + color: #fff; + padding-right: 15px; + } +} @media only screen and (max-width:950px) { .collapse > .navbar-nav > li > a { padding: 15px 8px; diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 56c0f599b..259306b6a 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,8 +9,7 @@ %title= full_title(yield(:title)) = stylesheet_link_tag 'application', 'data-turbolinks-track' => true, media: 'all' - - unless is_kata? - = stylesheet_link_tag 'extension/header', 'data-turbolinks-track' => true, media: 'all' + = stylesheet_link_tag 'extension/header', 'data-turbolinks-track' => true, media: 'all' = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags = scrivito_head_tags if using_scrivito? @@ -62,11 +61,10 @@ / at the end of the HEAD - if is_kata? - %link{:href => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", :rel => "stylesheet"} if is_kata? + %link{:href => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", :rel => "stylesheet"} %body - - unless is_kata? - = render 'shared/header' + = render 'shared/header' - flash.each do |message_type, message| %div{:class => "alert alert-#{message_type}"}= message = yield diff --git a/app/views/plain_page/index.html.haml b/app/views/plain_page/index.html.haml index e07e170ff..46b7633b8 100644 --- a/app/views/plain_page/index.html.haml +++ b/app/views/plain_page/index.html.haml @@ -1,38 +1,6 @@ %body - if @obj && !@obj.permalink.nil? - / Navigation - %nav.navbar.navbar-default.navbar-custom.navbar-fixed-top - .container-fluid - / Brand and toggle get grouped for better mobile display - .navbar-header.page-scroll - %button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"} - %span.sr-only Toggle navigation - 目次 - %i.fa.fa-bars - %a.navbar-brand{:href => "#top"} CoderDojo Kata - / Collect the nav links, forms, and other content for toggling - #bs-example-navbar-collapse-1.collapse.navbar-collapse - %ul.nav.navbar-nav.navbar-right - / DocSearch: https://github.com/algolia/docsearch-configs/blob/master/configs/coderdojo.json - %li.search - %input#searchbox{ :placeholder => "🔍 検索", :type => "text" } - #hits - #pagination - %li - %a{:href => "#README"} はじめに - %li - %a{:href => "#learn"} 学ぶ - %li - %a{:href => "#challenge"} 腕試し - %li - %a{:href => "#startup"} 立ち上げる - %li - %a{:href => "#support"} 支援 - %li - %a{:href => "#faq"} FAQ - / /.navbar-collapse - / /.container - / Page Header + / Set your background image for this header on the line below. %header.intro-header{:style => "padding-top: 100px; background-image: url('img/kata-cover.png')"} .container @@ -41,10 +9,10 @@ .post-heading %h1 CoderDojo Kata %h2.subheading 道場情報まとめ - - / Post Content - %article - .container + + / Post Content + %article + .container .row .col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1.fontsize-bigger / Navigator diff --git a/app/views/shared/_header.html.haml b/app/views/shared/_header.html.haml index f4ba56bf7..df61ab0fa 100644 --- a/app/views/shared/_header.html.haml +++ b/app/views/shared/_header.html.haml @@ -17,5 +17,16 @@ %li= link_to 'パートナー法人', '/#partners' %li= link_to '統計情報', '/stats' %li= link_to 'News', '/#news' - %li= link_to 'Kata', '/kata' + %li.navbar-dd-p + = link_to 'Kata', '/kata' + = check_box_tag :kataNav, 'ドロップダウンメニュー表示', false, class: 'navbar-dd-c' + = label_tag :kataNav, '', class: 'navbar-dd-l' + %ul.navbar-dd + %li= link_to 'はじめに', '/kata#README' + %li= link_to '学ぶ', '/kata#learn' + %li= link_to '腕試し', '/kata#challenge' + %li= link_to '立ち上げる', '/kata#startup' + %li= link_to '支援', '/kata#support' + %li= link_to 'FAQ', '/kata#faq' + %li= link_to 'お問い合わせ', '/#contact' From d88ff8042f03150a6b950a7a455f8aefbe593087 Mon Sep 17 00:00:00 2001 From: Yuki Mihashi <31533303+yuki384@users.noreply.github.com> Date: Wed, 29 Jul 2020 16:19:53 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E3=83=89=E3=83=AD=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=83=80=E3=82=A6=E3=83=B3=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=83=9B=E3=83=90=E3=83=BC=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/stylesheets/extension/header.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/extension/header.scss b/app/assets/stylesheets/extension/header.scss index e7afa38d6..849eaa810 100644 --- a/app/assets/stylesheets/extension/header.scss +++ b/app/assets/stylesheets/extension/header.scss @@ -31,19 +31,21 @@ body { font-size: 14px; font-weight: bold; line-height: 26px; + &:hover{ + color: #fff; + } } -.collapse > .navbar-nav > li > a { +.collapse > .navbar-nav > li { position: relative; &:hover { - color: #fff; &:before, &:after { width: 40%; } } } -.collapse > .navbar-nav > li > a:before, -.collapse > .navbar-nav > li > a:after { +.collapse > .navbar-nav > li:before, +.collapse > .navbar-nav > li:after { position: absolute; bottom: 10px; content: ""; @@ -52,10 +54,10 @@ body { background-color: #fff; transition: 0.2s; } -.collapse > .navbar-nav > li > a:before { +.collapse > .navbar-nav > li:before { left: 50%; } -.collapse > .navbar-nav > li > a:after { +.collapse > .navbar-nav > li:after { right: 50%; } .navbar-toggle { From 62cf530bf98e97dff6e13ad8e051734795cf0231 Mon Sep 17 00:00:00 2001 From: Yuki Mihashi <31533303+yuki384@users.noreply.github.com> Date: Wed, 29 Jul 2020 16:51:55 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E3=83=89=E3=83=AD=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=83=80=E3=82=A6=E3=83=B3=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=82=B9=E3=83=9E=E3=83=9B=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/stylesheets/extension/header.scss | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/extension/header.scss b/app/assets/stylesheets/extension/header.scss index 849eaa810..135635789 100644 --- a/app/assets/stylesheets/extension/header.scss +++ b/app/assets/stylesheets/extension/header.scss @@ -123,7 +123,7 @@ body { } } -@media only screen and (max-width:840px) { +@media only screen and (max-width:865px) { .container-fluid { padding: 5px 10px; } @@ -145,6 +145,15 @@ body { } @media only screen and (max-width:768px){ + .navbar-dd { + display: block; + position: static; + padding: 0 2rem; + width: 100%; + } + .navbar-dd-l { + display: none; + } #header-logo img { margin-left: 15px; } @@ -157,11 +166,14 @@ body { color: #cce3f9; } } - .collapse > .navbar-nav > li > a:before, - .collapse > .navbar-nav > li > a:after { + .collapse > .navbar-nav > li:before, + .collapse > .navbar-nav > li:after { content: none; } .navbar-toggle { padding: 12px; } + .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { + max-height: 540px; + } } From e9a4af77a43df9dba65d83c89586d13d611825a9 Mon Sep 17 00:00:00 2001 From: Yuki Mihashi <31533303+yuki384@users.noreply.github.com> Date: Thu, 30 Jul 2020 10:29:45 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=E4=B8=89=E8=A7=92=E3=82=A2=E3=82=A4?= =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=82=92CSS=E3=81=A7=E3=81=AE=E5=AE=9F?= =?UTF-8?q?=E8=A3=85=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/stylesheets/extension/header.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/extension/header.scss b/app/assets/stylesheets/extension/header.scss index 135635789..8c08792c9 100644 --- a/app/assets/stylesheets/extension/header.scss +++ b/app/assets/stylesheets/extension/header.scss @@ -102,19 +102,25 @@ body { display: block; } &:checked ~ .navbar-dd-l::before { - content: '\f0d8'; + transform: rotate(180deg); } } .navbar-dd-l { cursor: pointer; + margin-bottom: 2px; &:hover:before { opacity: .8; } &::before { - content: '\f0d7'; - font-family: 'Font Awesome 5 Free'; + content: ''; + display: block; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 7px solid #fff; color: #fff; - padding-right: 15px; + margin-right: 15px; } } @media only screen and (max-width:950px) { From c83d616b3aff92dbe12e7fcb6adb65a826e944e9 Mon Sep 17 00:00:00 2001 From: Yuki Mihashi <31533303+yuki384@users.noreply.github.com> Date: Thu, 30 Jul 2020 10:49:29 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=E3=83=89=E3=83=AD=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=83=80=E3=82=A6=E3=83=B3=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=82=92=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=A7=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=8B=E3=82=89=E3=83=9B=E3=83=90=E3=83=BC=E3=81=A7?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/stylesheets/extension/header.scss | 27 +++++++------------- app/views/shared/_header.html.haml | 3 +-- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/app/assets/stylesheets/extension/header.scss b/app/assets/stylesheets/extension/header.scss index 8c08792c9..a60807a93 100644 --- a/app/assets/stylesheets/extension/header.scss +++ b/app/assets/stylesheets/extension/header.scss @@ -77,13 +77,16 @@ body { display: inline-block; padding-right: 0; } + &:hover > .navbar-dd { + display: block; + } } .navbar-dd { display: none; position: absolute; list-style: none; - top: 60px; - padding: 0 0 8px 0; + top: 50px; + padding: 10px 0 8px 0; background: #2275CA; width: 120px; a { @@ -96,29 +99,17 @@ body { } } } -.navbar-dd-c { - display: none; - &:checked ~ .navbar-dd { - display: block; - } - &:checked ~ .navbar-dd-l::before { - transform: rotate(180deg); - } -} .navbar-dd-l { - cursor: pointer; + display: inline-block; margin-bottom: 2px; - &:hover:before { - opacity: .8; - } &::before { content: ''; display: block; width: 0; height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 7px solid #fff; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid #fff; color: #fff; margin-right: 15px; } diff --git a/app/views/shared/_header.html.haml b/app/views/shared/_header.html.haml index df61ab0fa..be6b530de 100644 --- a/app/views/shared/_header.html.haml +++ b/app/views/shared/_header.html.haml @@ -19,8 +19,7 @@ %li= link_to 'News', '/#news' %li.navbar-dd-p = link_to 'Kata', '/kata' - = check_box_tag :kataNav, 'ドロップダウンメニュー表示', false, class: 'navbar-dd-c' - = label_tag :kataNav, '', class: 'navbar-dd-l' + %span.navbar-dd-l %ul.navbar-dd %li= link_to 'はじめに', '/kata#README' %li= link_to '学ぶ', '/kata#learn'