Update to Bootstrap 5 (#6485)

Add social media notice

Fix social-media-notice colors

Fix bootstrap conflicts

Remove custom bootstrap files

Make accept btn close modal

Update js/social-media.js

Co-authored-by: Michael Loßin <github@michael-lossin.de>

Move inline styling to main.scss

Fix tabbing order

Rewrite imports to follow coding style
pull/6665/head
Carlgo11 2 years ago committed by GitHub
parent d2d5951e10
commit 9306d44831
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,7 +1,7 @@
{% assign entries = include.entries %}
<div id="{{ include.category.name }}-table" class="collapse category-table desktop-only">
<a id="{{ include.category.name }}" class="category-href"></a>
<table class="table table-hover table-bordered table-bordered">
<table class="table table-bordered table-bordered">
<thead class="sticky-top">
<tr>
<th scope="col">{{ include.category.title }}</th>
@ -37,7 +37,7 @@
{{ name }}</a>
{% if website.notes %}
<i class="fas fa-exclamation-triangle exception" data-content="{{ website.notes }}"></i>
<i class="fas fa-exclamation-triangle exception col" data-content="{{ website.notes }}"></i>
{% endif %}
</div>
</td>
@ -133,19 +133,19 @@
Tell them to support 2FA!
<div class="social-button-group">
{% if website.contact.twitter %}
<div class="twitter-button social-button btn" data-twitter="{{ website.contact.twitter }}" data-lang="{{ website.contact.language }}">
<div tabindex="0" role="button" class="twitter-button social-button btn" data-twitter="{{ website.contact.twitter }}" data-lang="{{ website.contact.language }}">
<i class="fab fa-twitter"></i>
On Twitter
</div>
{% endif %}
{% if website.contact.facebook %}
<div class="facebook-button social-button btn" data-facebook="{{ website.contact.facebook }}">
<div tabindex="0" role="button" class="facebook-button social-button btn" data-facebook="{{ website.contact.facebook }}">
<i class="fab fa-facebook-f"></i>
On Facebook
</div>
{% endif %}
{% if website.contact.email %}
<div class="email-button social-button btn" data-email="{{ website.contact.email }}" data-lang="{{ website.contact.language }}">
<div tabindex="0" role="button" class="email-button social-button btn" data-email="{{ website.contact.email }}" data-lang="{{ website.contact.language }}">
<i class="fas fa-envelope"></i>
Via Email</div>
{% endif %}

@ -61,7 +61,7 @@
{% if website.contact.twitter %}
<div class="col ml-md-auto twitter-button social-button btn" title="Tweet them!" data-twitter="{{ website.contact.twitter }}" data-lang="{{ website.contact.language }}">
<div tabindex="0" role="button" class="col ml-md-auto twitter-button social-button btn" title="Tweet them!" data-twitter="{{ website.contact.twitter }}" data-lang="{{ website.contact.language }}">
<i class="fab fa-twitter"></i>
</div>
@ -69,7 +69,7 @@
{% if website.contact.facebook %}
<div class="col facebook-button social-button btn" title="Contact them!" data-facebook="{{ website.contact.facebook }}">
<div tabindex="0" role="button" class="col facebook-button social-button btn" title="Contact them!" data-facebook="{{ website.contact.facebook }}">
<i class="fab fa-facebook-f"></i>
</div>
@ -77,7 +77,7 @@
{% if website.contact.email %}
<div class="col email-button social-button btn" title="Email them!" data-email="{{ website.contact.email }}" data-lang="{{ website.contact.language }}">
<div tabindex="0" role="button" class="col email-button social-button btn" title="Email them!" data-email="{{ website.contact.email }}" data-lang="{{ website.contact.language }}">
<i class="fas fa-envelope"></i>
</div>

@ -0,0 +1,16 @@
<div class="modal fade" id="social-media-warn">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content social-media-modal">
<div class="modal-header">
<h5 class="modal-title">Attention!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Posting to social media could potentially give other people clues to what accounts you have.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="social-media-accept" data-bs-dismiss="modal">I accept the risk</button>
</div>
</div>
</div>
</div>

@ -7,8 +7,8 @@
/* Desktop table */
.category-table {
width: calc(100% - 30px);
margin: 15px 15px;
width: calc(100% - 20px);
margin: 10px 10px;
flex: none;
max-width: none;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
@ -24,8 +24,10 @@
margin-bottom: 0;
border-left: 0; // See tbody>tr>td> border-left
border-right: 0; // See tbody>tr>td> border-left
vertical-align: center;
thead {
border-color: transparent;
th {
font-weight: 700;
font-size: 18px;
@ -37,13 +39,17 @@
tbody {
tr {
td {
vertical-align: baseline;
border-left: 1px solid rgb(222, 226, 230); // Weird bug that displays borders outside of the table at 1st td in row.
&:first-child {
border-left: 0 solid !important;
}
}
&.table-success {
border-color: #8fd19e;
}
&.table-danger {
border-color: #ed969e;
td {
text-align: left;
}
@ -63,6 +69,7 @@
max-height: 52px;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
&.exception-site {
margin-right: -24px;

@ -24,6 +24,11 @@
}
}
.social-media-modal {
background-color: var(--background);
color: var(--text-color);
}
@media screen and (max-width: 992px) {
.social-button {
margin: .2em;

@ -10,10 +10,10 @@
<title>{{ site.title }}</title>
{% include html/icons.html %}
<link href="/manifest.json" rel="manifest">
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" crossorigin="anonymous" integrity="sha512-9BwLAVqqt6oFdXohPLuNHxhx36BVj5uGSGmizkmGkgl3uMSgNalKc/smum+GJU/TTP0jy0+ruwC3xNAk3F759A==" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
<link rel="stylesheet" crossorigin="anonymous" integrity="sha512-xbKj38YamwOa1yyC9gTFLExhbbV6r8WZwaEYYYaedfU0gosQuncv6p//9zcjK1NO2nkV/Nv5X5TkM/zjOnlc+w==" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300|Spartan:500&display=swap">
<link rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" integrity="sha512-9BwLAVqqt6oFdXohPLuNHxhx36BVj5uGSGmizkmGkgl3uMSgNalKc/smum+GJU/TTP0jy0+ruwC3xNAk3F759A==" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
<link rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" integrity="sha512-xbKj38YamwOa1yyC9gTFLExhbbV6r8WZwaEYYYaedfU0gosQuncv6p//9zcjK1NO2nkV/Nv5X5TkM/zjOnlc+w==" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css"/>
<link rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300|Spartan:500&display=swap">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/navbar.css" rel="stylesheet">
<link href="/css/corner.css" rel="stylesheet">
@ -62,9 +62,9 @@
</div>
</div>
<script crossorigin="anonymous" integrity="sha512-C5x7QiS49O4ubITbqnAX93oOLk9/cASa+m8GawJMki1i4z8AjFDeklRCqiBBjj7niQULNW6nDhqf7l06zrZ9mA==" src="https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.1/jets.min.js"></script>
<script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.1/jets.min.js" integrity="sha512-C5x7QiS49O4ubITbqnAX93oOLk9/cASa+m8GawJMki1i4z8AjFDeklRCqiBBjj7niQULNW6nDhqf7l06zrZ9mA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/popup.js"></script>
<script src="/js/main.js"></script>
<script src="/js/social-media.js"></script>

File diff suppressed because one or more lines are too long

@ -18,9 +18,11 @@ body {
min-width: 300px;
color: var(--text-color);
}
html {
scroll-behavior: smooth;
}
h1, h2, h3, h4 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@ -32,6 +34,9 @@ h1, h2, h3, h4 {
a {
color: #3596ff;
}
.btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
}
@ -60,6 +65,7 @@ h1, h2, h3, h4 {
/** Top content on index.html **/
.main {
margin: 0;
#logo-outer {
padding: 1em;
text-align: center;
@ -139,6 +145,20 @@ h1, h2, h3, h4 {
}
}
.social-media-modal {
.modal-header {
border-bottom: none;
}
.modal-footer {
border-top: none;
}
}
.row {
margin: 0;
}
/** Device specific content **/
@media screen and (min-width: 993px) {
.mobile-only {

@ -59,3 +59,5 @@ layout: default
{% endfor %}
</div>
<h2 id="no-results">No results found.</h2>
{% include html/social-media-notice.html %}

File diff suppressed because one or more lines are too long

@ -1,8 +1,5 @@
---
---
$('.facebook-button').click(function () {
window.open("https://facebook.com/" + $(this).data('facebook'), '_blank');
})
$('.email-button').click(function () {
let langs = new Map();
@ -17,27 +14,43 @@ $('.email-button').click(function () {
window.open('mailto:' + $(this).data('email') + '?subject=' + langs.get(lang));
})
$('.facebook-button').click(function () {
const uri = `https://facebook.com/${$(this).data('facebook')}`;
social_media_notice(uri);
})
$('.twitter-button').click(function () {
const uri = twitter_uri($(this).data('lang'), $(this).data('twitter'));
social_media_notice(uri);
})
function social_media_notice(uri){
if (window.localStorage.getItem('social-media-notice') !== 'hidden') {
let modal = new bootstrap.Modal($('#social-media-warn'));
modal.toggle();
$('#social-media-accept').attr('onclick', `window.localStorage.setItem('social-media-notice', 'hidden');window.open('${uri}', '_blank');`)
} else {
window.open(uri, '_blank');
}
}
function twitter_uri(lang,handle){
let langs = new Map();
let tweets = [];
{% for lang in site.data.languages %}
{% if lang[1].tweets %}
tweets = [];
{% for tweet in lang[1].tweets %}
tweets.push("{{ tweet |cgi_escape }}");
{% endfor %}
langs.set("{{ lang[0] }}", tweets);
{% endif %}
{% endfor %}
let lang = $(this).data('lang');
const handle = $(this).data('twitter');
{% for lang in site.data.languages %}
{% if lang[1].tweets %}
tweets = [];
{% for tweet in lang[1].tweets %}
tweets.push("{{ tweet |cgi_escape }}");
{% endfor %}
langs.set("{{ lang[0] }}", tweets);
{% endif %}
{% endfor %}
if (!langs.has(lang) || lang == null) lang = "en";
const index = Math.floor(Math.random() * langs.get(lang).length);
const text = langs.get(lang)[index].replace('TWITTERHANDLE', handle);
const url = "{{ site.url | cgi_escape }}";
const tfa_handle = "{{ site.twitter | cgi_escape }}";
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=SupportTwoFactorAuth&related=${tfa_handle}`, '_blank');
})
return `https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=SupportTwoFactorAuth&related=${tfa_handle}`
}

Loading…
Cancel
Save