Backup_Repos/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-12-06 08:34:14 +01:00
Code Issues Projects Releases Wiki Activity

lock button woking and class fixed

Browse source
This commit is contained in:
shumit taher 2025-09-29 10:38:59 +00:00
parent 63f499081f
commit bcfb7cbbaf
3 changed files with 73 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/components/InteractiveEditor/PinInput.vue
View file

@ -68,60 +68,7 @@ export default {
</script>
<style scoped lang="scss">
.pin-gate {
padding: .9rem;
border-radius: var(--curve-factor);
border: 1px solid var(--border);
background: var(--item-background);
box-shadow: var(--item-shadow);
color: var(--primary);
}
.pin-head {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .6rem;
font-weight: 600;
}
.pin-form {
margin-bottom: .6rem;
}
.pin-actions {
display: flex;
align-items: center;
justify-content: right;
gap: .5rem;
flex-wrap: wrap;
}
@import '@/styles/pin-input.scss';
.pin-btn {
padding: .5rem .9rem;
border-radius: .6rem;
border: 1px solid var(--border);
background: var(--button-bg);
color: var(--primary);
cursor: pointer;
transition: transform .06s ease;
&:active { transform: translateY(1px); }
}
.pin-reset {
background: transparent;
border: none;
padding: .3rem .2rem;
color: var(--primary);
opacity: .8;
text-decoration: underline;
cursor: pointer;
&:hover { opacity: 1; }
}
.btn-icon {
margin-right: .4rem;
font-size: .95em;
line-height: 0;
opacity: .9;
}
</style>

11
src/components/LinkItems/Section.vue
View file

@ -20,10 +20,6 @@
@unlock_attempt="saveUnlockPins"
/>
<div v-if="!showPinRequired">
<button v-if="unLockedWithPin" class="pin-reset" @click="lockAgain" type="button">
<i class="fas fa-lock btn-icon" aria-hidden="true"></i>
{{ $t('pin.lock') }}
</button>
<!-- If no items, show message -->
<div v-if="isEmpty" class="no-items">
{{ $t('home.no-items-section') }}
@ -82,6 +78,12 @@
@navigateToSection="navigateToSection"
/>
</div>
<div v-if="unLockedWithPin" class="pin-unlocked-bar">
<button class="pin-reset" @click="lockAgain" type="button">
<i class="fas fa-lock btn-icon" aria-hidden="true"></i>
{{ $t('pin.lock') }}
</button>
</div>
</div>
<!-- Modal for opening in modal view -->
<IframeModal
@ -431,6 +433,7 @@ export default {
<style scoped lang="scss">
@import '@/styles/media-queries.scss';
@import '@/styles/style-helpers.scss';
@import '@/styles/pin-input.scss';
.no-items {
width: 100px;

65
src/styles/pin-input.scss Normal file
View file

@ -0,0 +1,65 @@
.btn-icon {
margin-right: .4rem;
font-size: .95em;
line-height: 0;
opacity: .9;
}
.pin-gate {
padding: .9rem;
border-radius: var(--curve-factor);
border: 1px solid var(--border);
background: var(--item-background);
box-shadow: var(--item-shadow);
color: var(--primary);
}
.pin-head {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .6rem;
font-weight: 600;
}
.pin-form {
margin-bottom: .6rem;
}
.pin-actions {
display: flex;
align-items: center;
justify-content: right;
gap: .5rem;
flex-wrap: wrap;
}
.pin-btn {
padding: .5rem .9rem;
border-radius: .6rem;
border: 1px solid var(--border);
background: var(--button-bg);
color: var(--primary);
cursor: pointer;
transition: transform .06s ease;
&:active { transform: translateY(1px); }
}
.pin-reset {
background: transparent;
border: none;
padding: .3rem .2rem;
color: var(--primary);
opacity: .8;
text-decoration: underline;
cursor: pointer;
&:hover { opacity: 1; }
}
.pin-unlocked-bar{
display: flex;
align-items: center;
width: 100%;
justify-content: flex-end;
}