Merge pull request 'fix: Remove unused components from web-app (#242)' (#257) from fix/issue-242 into master
This commit is contained in:
johba
commit
9203b5c17a
2 changed files with 0 additions and 326 deletions
|
|
@ -1,269 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="slider-wrapper">
|
||||
<div class="disabled-slider" :style="{ 'flex-basis': minPercentage + '%' }">
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
<div class="range-slider">
|
||||
<input
|
||||
class="range-slider__range"
|
||||
type="range"
|
||||
ref="sliderInput"
|
||||
:style="{
|
||||
background: `linear-gradient(90deg, ${settings.fill} ${percentageDot}%, ${settings.background} ${percentageDot + 0.1}%)`,
|
||||
}"
|
||||
:value="props.modelValue"
|
||||
:min="props.min"
|
||||
:max="props.max"
|
||||
@input="updateModelValue"
|
||||
/>
|
||||
<div
|
||||
class="testbla"
|
||||
@mousemove="testMove"
|
||||
:style="{
|
||||
left: percentageDot + '%',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, computed } from 'vue';
|
||||
|
||||
const sliderInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
interface Emits {
|
||||
(event: 'update:modelValue', value: number): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number;
|
||||
min: number;
|
||||
max: number;
|
||||
}>();
|
||||
|
||||
const minPercentage = computed(() => {
|
||||
if (!props.min || !props.max) {
|
||||
return 0;
|
||||
}
|
||||
return (props.min * 100) / props.max;
|
||||
});
|
||||
|
||||
function updateModelValue(event: Event) {
|
||||
emit('update:modelValue', (event.target as HTMLInputElement).valueAsNumber);
|
||||
}
|
||||
|
||||
const sliderValue = computed({
|
||||
// getter
|
||||
get() {
|
||||
return Number.isFinite(props.modelValue) ? props.modelValue : props.min;
|
||||
},
|
||||
// setter
|
||||
set(newValue: number) {
|
||||
emit('update:modelValue', newValue);
|
||||
},
|
||||
});
|
||||
|
||||
const percentageDot = computed(() => {
|
||||
const range = props.max - props.min;
|
||||
if (range <= 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let percentage = (100 * (sliderValue.value - props.min)) / range;
|
||||
|
||||
if (percentage < 20) {
|
||||
percentage = percentage + 1;
|
||||
} else if (percentage > 50) {
|
||||
percentage = percentage - 2;
|
||||
} else if (percentage > 80) {
|
||||
percentage = percentage - 3;
|
||||
}
|
||||
|
||||
return percentage;
|
||||
});
|
||||
|
||||
const settings = {
|
||||
fill: '#7550AE',
|
||||
background: '#000000',
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (sliderInput.value) {
|
||||
sliderInput.value.addEventListener('input', setSliderValue);
|
||||
}
|
||||
});
|
||||
|
||||
function setSliderValue(event: Event) {
|
||||
const target = event.target as HTMLInputElement | null;
|
||||
if (target) {
|
||||
sliderValue.value = target.valueAsNumber;
|
||||
}
|
||||
}
|
||||
|
||||
function testMove(_event: unknown) {}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (sliderInput.value) {
|
||||
sliderInput.value.removeEventListener('input', setSliderValue);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.slider-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.testbla {
|
||||
position: absolute;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-color: var(--color-based-blue);
|
||||
user-select: none;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
right: 50%;
|
||||
border-radius: 25px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.disabled-slider {
|
||||
width: 60px;
|
||||
height: 7px;
|
||||
background-color: var(--color-border-main);
|
||||
/* margin-top: auto; */
|
||||
align-self: center;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dot {
|
||||
border-radius: 50px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: var(--color-border-main);
|
||||
position: absolute;
|
||||
right: -14px;
|
||||
/* bottom: 50%; */
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
// Base Colors
|
||||
$shade-10: #4682b4 !default;
|
||||
$shade-1: #d7dcdf !default;
|
||||
$shade-0: #fff !default;
|
||||
$teal: #4682b4 !default;
|
||||
|
||||
// Range Slider
|
||||
$range-width: 100% !default;
|
||||
|
||||
$range-handle-color: $shade-10 !default;
|
||||
$range-handle-color-hover: $teal !default;
|
||||
$range-handle-size: 15px !default;
|
||||
|
||||
$range-track-color: $shade-1 !default;
|
||||
$range-track-height: 7px !default;
|
||||
|
||||
$range-label-color: $shade-10 !default;
|
||||
$range-label-width: 60px !default;
|
||||
|
||||
.range-slider {
|
||||
width: $range-width;
|
||||
position: relative;
|
||||
accent-color: #7550ae;
|
||||
}
|
||||
|
||||
.range-slider__range {
|
||||
// width: calc(100% - (#{$range-label-width + 13px}));
|
||||
width: 100%;
|
||||
height: $range-track-height;
|
||||
border-radius: 5px;
|
||||
background: $range-track-color;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// Range Handle
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active::-webkit-slider-thumb {
|
||||
background: $range-handle-color-hover;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: $range-handle-size;
|
||||
height: $range-handle-size;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: $range-handle-color;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: $range-handle-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active::-moz-range-thumb {
|
||||
background: $range-handle-color-hover;
|
||||
}
|
||||
|
||||
// Focus state
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Range Label
|
||||
.range-slider__value {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $range-label-width;
|
||||
color: $shade-0;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
background: $range-label-color;
|
||||
padding: 5px 10px;
|
||||
margin-left: 8px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -7px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-right: 7px solid $range-label-color;
|
||||
border-bottom: 7px solid transparent;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox Overrides
|
||||
::-moz-range-track {
|
||||
background: $range-track-color;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input::-moz-focus-inner,
|
||||
input::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<div class="footer" :style="{ color: props.dark ? 'white' : 'black' }">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-headline subheader2">Follow HARBERG Protocol</div>
|
||||
<div class="social-links">
|
||||
<SocialButton :dark="props.dark" type="discord" :href="discord"></SocialButton>
|
||||
<SocialButton :dark="props.dark" type="telegram" :href="telegram"></SocialButton>
|
||||
<SocialButton :dark="props.dark" type="twitter" :href="twitter"></SocialButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SocialButton from '@/components/SocialButton.vue';
|
||||
|
||||
interface Props {
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
const discord = import.meta.env.VITE_DISCORD;
|
||||
const telegram = import.meta.env.VITE_TELEGRAM;
|
||||
const twitter = import.meta.env.VITE_TWITTER;
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.footer
|
||||
height: auto
|
||||
background-color: var(--midnight-black)
|
||||
border-top: 0.5px solid
|
||||
margin-top: auto
|
||||
@media (min-width: 768px)
|
||||
height: 150px
|
||||
min-height: 150px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
padding-bottom: unset
|
||||
padding-bottom: 72px
|
||||
.footer-inner
|
||||
padding: 24px 0
|
||||
font-size: 24px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 16px
|
||||
align-items: center
|
||||
border-top: 1px solid #000
|
||||
@media (min-width: 768px)
|
||||
padding: 16px 0 24px 0
|
||||
justify-content: center
|
||||
border-top: unset
|
||||
background-color: transparent
|
||||
.footer-headline subheader2
|
||||
font-size: 16px
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue