Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

Update CommentEditor styles for responsiveness

Browse Source 
Imported Bootstrap variables and updated styling to use responsive media breakpoints. Adjusted positioning of toggle buttons to ensure proper alignment on different screen sizes.
This commit is contained in:
Julien Fastré 2025-05-28 16:32:25 +02:00
parent 66bd63403b
commit d82727f831
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
View File

@ -24,7 +24,6 @@ const toggleButtonClass = computed(() => {
}); });
const toggleEditor = () => { const toggleEditor = () => {
console.log("toggleEditor");
let newValue; let newValue;
newValue = kind.value === "simple" ? "rich" : "simple"; newValue = kind.value === "simple" ? "rich" : "simple";
@ -32,8 +31,6 @@ const toggleEditor = () => {
window.localStorage.setItem(EDITOR_MODE_KEY, newValue); window.localStorage.setItem(EDITOR_MODE_KEY, newValue);
window.dispatchEvent(new Event("toggleEditorKind")); window.dispatchEvent(new Event("toggleEditorKind"));
console.log("new storage", window.localStorage.getItem(EDITOR_MODE_KEY));
}; };
const onKindChange = function (/* event: StorageEvent | Event */) { const onKindChange = function (/* event: StorageEvent | Event */) {
@ -96,6 +93,8 @@ onUnmounted(function () {
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
@import "ChillMainAssets/module/bootstrap/bootstrap";
.toggle-button { .toggle-button {
background: white; background: white;
border: none; border: none;
@ -103,15 +102,17 @@ onUnmounted(function () {
color: #069; color: #069;
cursor: pointer; cursor: pointer;
&.onEditor { @include media-breakpoint-up(md) {
position: relative; &.onEditor {
left: 1rem; position: relative;
top: -1.5rem; left: 1rem;
} top: -1.5rem;
&.onSimple { }
position: relative; &.onSimple {
top: -0.75rem; position: relative;
left: 1rem; top: -0.75rem;
left: 1rem;
}
} }
} }