mirror of
https://github.com/imputnet/cobalt.git
synced 2025-02-09 15:08:17 +00:00
web/updates: hide navigation buttons when nowhere to navigate
- removed box shadow on desktop - centered button vertically with flex
This commit is contained in:
parent
88fa780f6d
commit
213f2d2c92
|
@ -68,11 +68,13 @@
|
||||||
|
|
||||||
<div class="news">
|
<div class="news">
|
||||||
{#if changelog}
|
{#if changelog}
|
||||||
<div class="button-wrapper-desktop">
|
<div id="left-button" class="button-wrapper-desktop">
|
||||||
<button on:click={loadPrev} disabled={!prev}>
|
{#if prev}
|
||||||
<IconChevronLeft />
|
<button on:click={loadPrev}>
|
||||||
{prev || ""}
|
<IconChevronLeft />
|
||||||
</button>
|
{prev || ""}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog-wrapper">
|
<div class="changelog-wrapper">
|
||||||
{#await changelog.page}
|
{#await changelog.page}
|
||||||
|
@ -102,16 +104,17 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-wrapper-desktop">
|
<div id="right-button" class="button-wrapper-desktop">
|
||||||
<button
|
{#if next}
|
||||||
on:click={loadNext}
|
<button
|
||||||
on:focus={preloadNext}
|
on:click={loadNext}
|
||||||
on:mousemove={preloadNext}
|
on:focus={preloadNext}
|
||||||
disabled={!next}
|
on:mousemove={preloadNext}
|
||||||
>
|
>
|
||||||
{next || ""}
|
{next || ""}
|
||||||
<IconChevronRight />
|
<IconChevronRight />
|
||||||
</button>
|
</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
@ -127,16 +130,21 @@
|
||||||
.button-wrapper-desktop {
|
.button-wrapper-desktop {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-wrapper-desktop button {
|
.button-wrapper-desktop button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
display: flex;
|
display: flex;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-wrapper-desktop button:not(:focus-visible) {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
.changelog-wrapper {
|
.changelog-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-width: 850px;
|
max-width: 850px;
|
||||||
|
@ -146,8 +154,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled] {
|
button[disabled] {
|
||||||
opacity: 0.5;
|
opacity: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-wrapper-mobile {
|
.button-wrapper-mobile {
|
||||||
|
|
Loading…
Reference in a new issue