Skip to content

Commit

Permalink
added cookie popup and fixed button issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@somratpro
somratpro committed Oct 1, 2020
1 parent bf91450 commit 8b40742
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 108 deletions.
87 changes: 33 additions & 54 deletions assets/scss/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,12 @@
transform: scaleY(0);
}

&:focus {
&:active,
&:hover,
&.focus,
&.active {
outline: 0;
box-shadow: none !important;
}

&:active {
box-shadow: none;
}

&:hover {

&::before {
transform: scaleY(1);
Expand All @@ -55,74 +51,57 @@
}

.btn-primary {
background: $primary-color;
background-color: $primary-color;
color: $white;

&::before {
background: $white;
}

&:active {
background: $primary-color !important;
color: $primary-color;

&::before {
height: 80%;
}
background-color: $white;
}

&:hover {
background: darken($color: $primary-color, $amount: 10);
&:active,
&:hover,
&.focus,
&.active {
background-color: darken($color: $primary-color, $amount: 10);
border-color: darken($color: $primary-color, $amount: 10);
color: $primary-color;
}
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: $white;
background-color: darken($color: $primary-color, $amount: 10);
border-color: darken($color: $primary-color, $amount: 10);
}

.btn-secondary {
background: $white;
.btn-outline-primary {
border: 1px solid $primary-color;
color: $primary-color;
border: 1px solid $white;
background-color: transparent;

&::before {
background: $primary-color;
background-color: $white;
}

&:active {
background: $primary-color;
color: $white;
border: 1px solid $white;
}

&:hover {
background: $white;
color: $white;
border: 1px solid $white;
&:active,
&:hover,
&.focus,
&.active {
background-color: $primary-color;
border-color: $primary-color;
color: $primary-color;
}
}

.btn-primary-outline {
border: 1px solid $primary-color;
.btn-light {
background-color: $white;
color: $primary-color;
background: transparent;
border: 1px solid $white;

&::before {
background: $white;
background-color: $primary-color;
}

&:hover {
background: $primary-color;
color: $primary-color;
}

&:active {
background: $primary-color;
&:active,
&:hover,
&.focus,
&.active {
background-color: $white;
color: $white;
border: 1px solid $white;
}
}
5 changes: 5 additions & 0 deletions exampleSite/config.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,11 @@ gmap_api = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqO
map_latitude = "51.5223477"
map_longitude = "-0.1622023"
map_marker = "images/marker.png" # marker size 37*55 px

# cookies
[params.cookies]
enable = true
expire_days = 2

############################# social site ########################
[[params.social]]
Expand Down
8 changes: 4 additions & 4 deletions .../_gen/assets/scss/educenter-hugo/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,16 +142,16 @@ h6, .h6 {
color: #fff;
border: 1px solid #fff; }

.btn-primary-outline {
.btn-outline-primary {
border: 1px solid #ffbc3b;
color: #ffbc3b;
background: transparent; }
.btn-primary-outline::before {
.btn-outline-primary::before {
background: #fff; }
.btn-primary-outline:hover {
.btn-outline-primary:hover {
background: #ffbc3b;
color: #ffbc3b; }
.btn-primary-outline:active {
.btn-outline-primary:active {
background: #ffbc3b;
color: #fff; }

Expand Down
69 changes: 25 additions & 44 deletions ...eSite/resources/_gen/assets/scss/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,12 @@ h6, .h6 {
transition: transform .2s ease-in-out;
transform-origin: top;
transform: scaleY(0); }
.btn:focus {
.btn:active, .btn:hover, .btn.focus, .btn.active {
outline: 0;
box-shadow: none !important; }
.btn:active {
box-shadow: none; }
.btn:hover::before {
transform: scaleY(1);
transform-origin: bottom; }
.btn:active::before, .btn:hover::before, .btn.focus::before, .btn.active::before {
transform: scaleY(1);
transform-origin: bottom; }

.btn-sm {
font-size: 14px;
Expand All @@ -108,54 +106,37 @@ h6, .h6 {
padding: 5px 15px; }

.btn-primary {
background: #ffbc3b;
background-color: #ffbc3b;
color: #fff; }
.btn-primary::before {
background: #fff; }
.btn-primary:active {
background: #ffbc3b !important;
color: #ffbc3b; }
.btn-primary:active::before {
height: 80%; }
.btn-primary:hover {
background: #ffab08;
background-color: #fff; }
.btn-primary:active, .btn-primary:hover, .btn-primary.focus, .btn-primary.active {
background-color: #ffab08;
border-color: #ffab08;
color: #ffbc3b; }

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #ffab08;
border-color: #ffab08; }
.btn-outline-primary {
border: 1px solid #ffbc3b;
color: #ffbc3b;
background-color: transparent; }
.btn-outline-primary::before {
background-color: #fff; }
.btn-outline-primary:active, .btn-outline-primary:hover, .btn-outline-primary.focus, .btn-outline-primary.active {
background-color: #ffbc3b;
border-color: #ffbc3b;
color: #ffbc3b; }

.btn-secondary {
background: #fff;
.btn-light {
background-color: #fff;
color: #ffbc3b;
border: 1px solid #fff; }
.btn-secondary::before {
background: #ffbc3b; }
.btn-secondary:active {
background: #ffbc3b;
color: #fff;
border: 1px solid #fff; }
.btn-secondary:hover {
background: #fff;
.btn-light::before {
background-color: #ffbc3b; }
.btn-light:active, .btn-light:hover, .btn-light.focus, .btn-light.active {
background-color: #fff;
color: #fff;
border: 1px solid #fff; }

.btn-primary-outline {
border: 1px solid #ffbc3b;
color: #ffbc3b;
background: transparent; }
.btn-primary-outline::before {
background: #fff; }
.btn-primary-outline:hover {
background: #ffbc3b;
color: #ffbc3b; }
.btn-primary-outline:active {
background: #ffbc3b;
color: #fff; }

body {
background-color: #fff;
overflow-x: hidden; }
Expand Down
12 changes: 6 additions & 6 deletions layouts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
<p>{{ .content | markdownify }}</p>
{{ if .button.enable }}
{{ with .button }}
<a href="{{ .link | absLangURL }}" class="btn btn-primary-outline">{{ .label }}</a>
<a href="{{ .link | absLangURL }}" class="btn btn-outline-primary">{{ .label }}</a>
{{ end }}
{{ end }}
</div>
Expand All @@ -94,7 +94,7 @@ <h2 class="section-title">{{ .title | markdownify }}</h2>
<h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.course.title }}</h2>
<div class="border-top w-100 border-primary d-none d-sm-block"></div>
<div>
<a href="{{ `course` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block">{{ i18n "see_all" }}</a>
<a href="{{ `course` | relLangURL }}" class="btn btn-sm btn-outline-primary ml-sm-3 d-none d-sm-block">{{ i18n "see_all" }}</a>
</div>
</div>
</div>
Expand All @@ -112,7 +112,7 @@ <h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.course.title }}</h2>
<!-- mobile see all button -->
<div class="row">
<div class="col-12 text-center">
<a href="{{ `course` | relLangURL }}" class="btn btn-sm btn-primary-outline d-sm-none d-inline-block">{{ i18n "see_all" }}</a>
<a href="{{ `course` | relLangURL }}" class="btn btn-sm btn-outline-primary d-sm-none d-inline-block">{{ i18n "see_all" }}</a>
</div>
</div>
</div>
Expand All @@ -131,7 +131,7 @@ <h6 class="text-white font-secondary mb-0">{{ .subtitle | markdownify }}</h6>
<h2 class="section-title text-white">{{ .title | markdownify }}</h2>
{{ if .button.enable }}
{{ with .button }}
<a href="{{ .link | absLangURL }}" class="btn btn-secondary">{{ .label }}</a>
<a href="{{ .link | absLangURL }}" class="btn btn-light">{{ .label }}</a>
{{ end }}
{{ end }}
</div>
Expand All @@ -158,7 +158,7 @@ <h2 class="section-title text-white">{{ .title | markdownify }}</h2>
<h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.event.title }}</h2>
<div class="border-top w-100 border-primary d-none d-sm-block"></div>
<div>
<a href="{{`event` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block text-nowrap">{{ i18n "see_all" }}</a>
<a href="{{`event` | relLangURL }}" class="btn btn-sm btn-outline-primary ml-sm-3 d-none d-sm-block text-nowrap">{{ i18n "see_all" }}</a>
</div>
</div>
</div>
Expand All @@ -174,7 +174,7 @@ <h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.event.title }}</h2>
<!-- mobile see all button -->
<div class="row">
<div class="col-12 text-center">
<a href="{{`event` | relLangURL }}" class="btn btn-sm btn-primary-outline d-sm-none d-inline-block">{{ i18n "see_all" }}</a>
<a href="{{`event` | relLangURL }}" class="btn btn-sm btn-outline-primary d-sm-none d-inline-block">{{ i18n "see_all" }}</a>
</div>
</div>
</div>
Expand Down
44 changes: 44 additions & 0 deletions layouts/partials/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,4 +128,48 @@ <h4 class="text-white mb-5 text-uppercase">{{ i18n "new_notice" }}</h4>
ga('create', '{{ . }}', 'auto');
ga('send', 'pageview');
</script>
{{ end }}


<!-- cookie -->
{{ if site.Params.cookies.enable }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<div id="js-cookie-box" class="cookie-box cookie-box-hide">
This site uses cookies. By continuing to use this website, you agree to their use. <span id="js-cookie-button" class="btn btn-sm btn-outline-primary ml-2">I Accept</span>
</div>
<script>
(function ($) {
const cookieBox = document.getElementById('js-cookie-box');
const cookieButton = document.getElementById('js-cookie-button');
if (!Cookies.get('cookie-box')) {
cookieBox.classList.remove('cookie-box-hide');
cookieButton.onclick = function () {
Cookies.set('cookie-box', true, {
expires: {{ site.Params.cookies.expire_days }}
});
cookieBox.classList.add('cookie-box-hide');
};
}
})(jQuery);
</script>

<!-- style -->
<style>
.cookie-box {
position: fixed;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 9999;
padding: 1rem 2rem;
background: rgb(71, 71, 71);
transition: all .75s cubic-bezier(.19, 1, .22, 1);
color: #fdfdfd;
}

.cookie-box-hide {
display: none;
}
</style>
{{ end }}

0 comments on commit 8b40742

Please sign in to comment.