Skip to content

Commit

Permalink
FIX - button instead of a, focus
Browse files Browse the repository at this point in the history
  • Loading branch information
@MichalSvatos
MichalSvatos committed Mar 17, 2023
1 parent ec78145 commit 61676e0
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 28 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ Have you ever been in the situation in which you need to give someone your conta
- [x] Modal - option to change font size (+/-)

## Changelog
#### v1.1.1
- FIX - `a` --> `button`, focus state

#### v1.1.0
- Added font resize
- Changed scrollbar color
Expand Down
37 changes: 19 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
<meta name="description" content="Mr. Shareman - simple app for quickly sharing some text on the screen.">

<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png?v=1.1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png?v=1.1.0">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png?v=1.1.0">
<link rel="manifest" href="./images/site.webmanifest?v=1.1.0">
<link rel="mask-icon" href="./images/safari-pinned-tab.svg?v=1.1.0" color="#0d2613">
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png?v=1.1.1">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png?v=1.1.1">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png?v=1.1.1">
<link rel="manifest" href="./images/site.webmanifest?v=1.1.1">
<link rel="mask-icon" href="./images/safari-pinned-tab.svg?v=1.1.1" color="#0d2613">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#0d2613">

<!-- #CSS -->
<link rel="stylesheet" href="./style.css?v=1.1.0">
<link rel="manifest" href="./manifest.json?v=1.1.0">
<link rel="stylesheet" href="./style.css?v=1.1.1">
<link rel="manifest" href="./manifest.json?v=1.1.1">
</head>
<body>
<div class="glares"></div>
Expand Down Expand Up @@ -59,12 +59,12 @@ <h2 class="app__subtitle" data-title="▾ show me your screen ▾">
</p>
</footer>
<div class="modal js-modal">
<a href="#" class="modal__button modal__button--close js-modal-close">
<button class="modal__button modal__button--close js-modal-close">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
<path d="M6.758 17.243 12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
<a href="#" class="modal__button modal__button--fullscreen js-modal-fullscreen">
</button>
<button class="modal__button modal__button--fullscreen js-modal-fullscreen">
<span class="modal__button-icon modal__button-icon--on">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="m20 20-5-5m0 0v4m0-4h4M4 20l5-5m0 0v4m0-4H5M20 4l-5 5m0 0V5m0 4h4M4 4l5 5m0 0V5m0 4H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>
Expand All @@ -73,26 +73,27 @@ <h2 class="app__subtitle" data-title="▾ show me your screen ▾">
<path d="M9 9 4 4m0 0v4m0-4h4m7 5 5-5m0 0v4m0-4h-4M9 15l-5 5m0 0v-4m0 4h4m7-5 5 5m0 0v-4m0 4h-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</a>
<a href="#" class="modal__button modal__button--lights js-modal-lights">
</button>
<button class="modal__button modal__button--lights js-modal-lights">
<span class="modal__button-icon modal__button-icon--on">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M9 18h6m-5 3h4m-5-6c.001-2-.499-2.5-1.5-3.5-1-1-1.476-2.013-1.5-3.5-.047-3.05 2-5 6-5 4.001 0 6.049 1.95 6 5-.023 1.487-.5 2.5-1.5 3.5-.999 1-1.499 1.5-1.5 3.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>
<span class="modal__button-icon modal__button-icon--off">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="m21 2-1 1M3 2l1 1m17 13-1-1M3 16l1-1m5 3h6m-5 3h4M12 3C8 3 5.952 4.95 6 8c.023 1.487.5 2.5 1.5 3.5S9 13 9 15h6c0-2 .5-2.5 1.5-3.5h0c1-1 1.477-2.013 1.5-3.5.048-3.05-2-5-6-5z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>
</a>
<a href="#" class="modal__button modal__button--plus js-modal-plus">
</button>
<button class="modal__button modal__button--plus js-modal-plus">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 12h6m6 0h-6m0 0V6m0 6v6"/></svg>
</a>
<a href="#" class="modal__button modal__button--minus js-modal-minus">
</button>
<button class="modal__button modal__button--minus js-modal-minus">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 12h12"/></svg>
</a>
</button>
<div class="modal__body js-modal-body" data-font-size="100">
<!-- filled by JS -->
</div>
</div>
<script src="./script.js?v=1.1.0"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="./script.js?v=1.1.1"></script>
<script>
window.addEventListener('load', () => {
registerSW();
Expand Down
14 changes: 4 additions & 10 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ const closeModal = (modalWindow) => {
const lightSwitch = (modalWindow) => {
const lightSwitchButton = document.querySelector('.js-modal-lights')

lightSwitchButton.addEventListener('click', (e) => {
e.preventDefault()
lightSwitchButton.addEventListener('click', () => {
lightSwitchButton.classList.toggle('is-active')
modalWindow.classList.toggle('lights-on')
})
Expand Down Expand Up @@ -84,8 +83,7 @@ const toggleFullScreen = () => {
const fullscreen = (modalWindow) => {
const fullscreenButton = document.querySelector('.js-modal-fullscreen')

fullscreenButton.addEventListener('click', (e) => {
e.preventDefault()
fullscreenButton.addEventListener('click', () => {
fullscreenButton.classList.toggle('is-active')

toggleFullScreen()
Expand All @@ -97,9 +95,7 @@ const resize = (modalBody) => {
const minus = document.querySelector(".js-modal-minus")

// -- TODO: DRY ...
plus.addEventListener("click", (e) => {
e.preventDefault()

plus.addEventListener("click", () => {
let fontSize = Number(modalBody.dataset.fontSize)

if (fontSize >= 150) return
Expand All @@ -108,9 +104,7 @@ const resize = (modalBody) => {
modalBody.setAttribute("style", `font-size: ${fontSize}%`)
})

minus.addEventListener("click", (e) => {
e.preventDefault()

minus.addEventListener("click", () => {
let fontSize = Number(modalBody.dataset.fontSize)

if (fontSize <= 50) return
Expand Down
6 changes: 6 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@
box-sizing: border-box;
}

*:focus-visible {
outline-color: rgb(var(--color-supplement-01));
color: rgb(var(--color-supplement-01)) !important;
}

html {
background-color: rgb(var(--color-tertiary));
}
Expand Down Expand Up @@ -371,6 +376,7 @@ body::after {
transition: background-color var(--timing) var(--easing),
color var(--timing) var(--easing);
border: 2px dashed rgb(var(--color-primary) / 50%);
cursor: pointer;
}

.modal__button:hover {
Expand Down

0 comments on commit 61676e0

Please sign in to comment.