fix: Remove unused components from web-app (#242)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
openhands
parent
cbdc9a09da
commit
e394d68772
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