STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

remove sm- prefix

Browse Source
This commit is contained in:
James Collins
2023-04-24 15:25:36 +10:00
parent 7e2917d447
commit 12be354cc9
15 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/components/SMCaptchaNotice.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="sm-captcha-notice"> <div class="captcha-notice">
This site is protected by reCAPTCHA and the Google This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply. <a href="https://policies.google.com/terms">Terms of Service</a> apply.
@@ -7,7 +7,7 @@
</template> </template>
<style lang="scss"> <style lang="scss">
.sm-captcha-notice { .captcha-notice {
color: $secondary-color; color: $secondary-color;
font-size: 65%; font-size: 65%;
line-height: 1.2rem; line-height: 1.2rem;

22
resources/js/components/SMEditor.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="sm-editor"> <div class="editor">
<Editor <Editor
ref="tinyeditor" ref="tinyeditor"
v-model="editorContent" v-model="editorContent"
@@ -80,7 +80,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
editor.on("PreInit", function () { editor.on("PreInit", function () {
var contentStyle = editor.options.get("content_style") || ""; var contentStyle = editor.options.get("content_style") || "";
contentStyle += ` contentStyle += `
.tinymce-sm-gallery { .tinymce-gallery {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 20px auto; margin: 20px auto;
@@ -90,7 +90,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
white-space: nowrap; white-space: nowrap;
} }
.tinymce-sm-gallery::before { .tinymce-gallery::before {
position: absolute; position: absolute;
content: ""; content: "";
top: 0; top: 0;
@@ -100,7 +100,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.tinymce-sm-gallery::after { .tinymce-gallery::after {
position: absolute; position: absolute;
content: "Image Gallery"; content: "Image Gallery";
top: 50%; top: 50%;
@@ -116,7 +116,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
border-radius: 12px; border-radius: 12px;
} }
.tinymce-sm-gallery-item { .tinymce-gallery-item {
display: inline-block; display: inline-block;
width: 355px; width: 355px;
height: 200px; height: 200px;
@@ -132,11 +132,11 @@ tinymce.PluginManager.add("gallery", function (editor) {
var node = editor.selection.getNode(); var node = editor.selection.getNode();
if (node) { if (node) {
if (!editor.dom.hasClass(node, "tinymce-sm-gallery")) { if (!editor.dom.hasClass(node, "tinymce-gallery")) {
// Check if node is a descendant of a gallery node // Check if node is a descendant of a gallery node
var galleryNode = editor.dom.getParent( var galleryNode = editor.dom.getParent(
node, node,
".tinymce-sm-gallery" ".tinymce-gallery"
); );
if (!galleryNode) { if (!galleryNode) {
node = null; node = null;
@@ -162,10 +162,10 @@ tinymce.PluginManager.add("gallery", function (editor) {
let galleryContent = ""; let galleryContent = "";
if (url.length > 0) { if (url.length > 0) {
url.forEach((item) => { url.forEach((item) => {
galleryContent += `<div class="tinymce-sm-gallery-item" style="background-image:url('${item}');"></div>`; galleryContent += `<div class="tinymce-gallery-item" style="background-image:url('${item}');"></div>`;
}); });
galleryContent = `<div contentEditable="false" class="tinymce-sm-gallery">${galleryContent}</div>`; galleryContent = `<div contentEditable="false" class="tinymce-gallery">${galleryContent}</div>`;
} }
const selection = editor.selection; const selection = editor.selection;
@@ -194,11 +194,11 @@ tinymce.PluginManager.add("gallery", function (editor) {
api.setActive( api.setActive(
node && node &&
(editor.dom.hasClass(node, "tinymce-sm-gallery") || (editor.dom.hasClass(node, "tinymce-gallery") ||
(node.parentNode && (node.parentNode &&
editor.dom.hasClass( editor.dom.hasClass(
node.parentNode, node.parentNode,
"tinymce-sm-gallery" "tinymce-gallery"
))) )))
); );
}; };

2
resources/js/components/SMHTML.vue
View File

@@ -36,7 +36,7 @@ const computedContent = computed(() => {
// Convert image galleries to SMImageGallery component // Convert image galleries to SMImageGallery component
const regexGallery = const regexGallery =
/<div.*?class="tinymce-sm-gallery".*?>\s*((?:<div class="tinymce-sm-gallery-item" style="background-image: url\('.*?'\);">.*?<\/div>\s*)*)<\/div>/gi; /<div.*?class="tinymce-gallery".*?>\s*((?:<div class="tinymce-gallery-item" style="background-image: url\('.*?'\);">.*?<\/div>\s*)*)<\/div>/gi;
const matches = [...html.matchAll(regexGallery)]; const matches = [...html.matchAll(regexGallery)];
for (const match of matches) { for (const match of matches) {

54
resources/js/components/SMImageGallery.vue
View File

@@ -1,21 +1,21 @@
<template> <template>
<div class="sm-image-gallery" ref="gallery"> <div class="image-gallery" ref="gallery">
<div <div
class="sm-image-gallery-inner" class="image-gallery-inner"
:style="{ transform: `translateX(-${sliderOffset}px)` }"> :style="{ transform: `translateX(-${sliderOffset}px)` }">
<div <div
class="sm-image-gallery-slide" class="image-gallery-slide"
v-for="(image, index) in images" v-for="(image, index) in images"
:key="index"> :key="index">
<img <img
:src="imageSize('small', image as string)" :src="imageSize('small', image as string)"
class="sm-image-gallery-image" class="image-gallery-image"
@click="showModal(index)" /> @click="showModal(index)" />
</div> </div>
</div> </div>
<div <div
v-if="!hidePrevArrow" v-if="!hidePrevArrow"
class="sm-image-gallery-arrow sm-image-gallery-arrow-left" class="image-gallery-arrow image-gallery-arrow-left"
@click="prevSlide"> @click="prevSlide">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path <path
@@ -27,7 +27,7 @@
</div> </div>
<div <div
v-if="!hideNextArrow" v-if="!hideNextArrow"
class="sm-image-gallery-arrow sm-image-gallery-arrow-right" class="image-gallery-arrow image-gallery-arrow-right"
@click="nextSlide"> @click="nextSlide">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path <path
@@ -39,12 +39,12 @@
</div> </div>
<div <div
v-if="showModalImage !== null" v-if="showModalImage !== null"
class="sm-image-gallery-modal" class="image-gallery-modal"
@click="hideModal"> @click="hideModal">
<img <img
:src="images[showModalImage]" :src="images[showModalImage]"
class="sm-image-gallery-modal-image" /> class="image-gallery-modal-image" />
<div class="sm-image-gallery-modal-close" @click="hideModal"> <div class="image-gallery-modal-close" @click="hideModal">
&times; &times;
</div> </div>
</div> </div>
@@ -103,7 +103,7 @@ const handleTouchEnd = () => {
const handleResize = () => { const handleResize = () => {
const slides = gallery.value.querySelectorAll( const slides = gallery.value.querySelectorAll(
".sm-image-gallery-slide" ".image-gallery-slide"
) as HTMLElement[]; ) as HTMLElement[];
slideWidths.value = Array.from(slides).map((slide) => { slideWidths.value = Array.from(slides).map((slide) => {
const computedStyle = window.getComputedStyle(slide); const computedStyle = window.getComputedStyle(slide);
@@ -120,7 +120,7 @@ const handleResize = () => {
); );
}); });
sliderWidth.value = gallery.value.querySelector( sliderWidth.value = gallery.value.querySelector(
".sm-image-gallery-inner" ".image-gallery-inner"
).offsetWidth; ).offsetWidth;
let visibleWidth = 0; let visibleWidth = 0;
@@ -228,7 +228,7 @@ const hideNextArrow = computed(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-image-gallery { .image-gallery {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 20px auto; margin: 20px auto;
@@ -237,13 +237,13 @@ const hideNextArrow = computed(() => {
justify-content: center; justify-content: center;
} }
.sm-image-gallery-inner { .image-gallery-inner {
display: flex; display: flex;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
// height: 100%; // height: 100%;
} }
.sm-image-gallery-slide { .image-gallery-slide {
// display: flex; // display: flex;
// justify-content: center; // justify-content: center;
// align-items: center; // align-items: center;
@@ -261,14 +261,14 @@ const hideNextArrow = computed(() => {
} }
} }
.sm-image-gallery-image { .image-gallery-image {
cursor: pointer; cursor: pointer;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: contain; object-fit: contain;
} }
.sm-image-gallery-arrow { .image-gallery-arrow {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@@ -284,33 +284,33 @@ const hideNextArrow = computed(() => {
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
} }
.sm-image-gallery-arrow.disabled { .image-gallery-arrow.disabled {
pointer-events: none; pointer-events: none;
} }
.sm-image-gallery-arrow:hover { .image-gallery-arrow:hover {
transform: translateY(-50%) scale(1.25); transform: translateY(-50%) scale(1.25);
} }
.sm-image-gallery-arrow-left { .image-gallery-arrow-left {
left: 0; left: 0;
} }
.sm-image-gallery-arrow-right { .image-gallery-arrow-right {
right: 0; right: 0;
} }
.sm-image-gallery-arrow svg { .image-gallery-arrow svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
fill: none; fill: none;
} }
.sm-image-gallery-arrow svg path { .image-gallery-arrow svg path {
stroke-width: 2; stroke-width: 2;
} }
.sm-image-gallery-modal { .image-gallery-modal {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -327,7 +327,7 @@ const hideNextArrow = computed(() => {
z-index: 1000; z-index: 1000;
} }
.sm-image-gallery-modal * { .image-gallery-modal * {
pointer-events: auto; pointer-events: auto;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@@ -335,13 +335,13 @@ const hideNextArrow = computed(() => {
user-select: none; user-select: none;
} }
.sm-image-gallery-modal-image { .image-gallery-modal-image {
max-width: 90%; max-width: 90%;
max-height: 90%; max-height: 90%;
object-fit: contain; object-fit: contain;
} }
.sm-image-gallery-modal-close { .image-gallery-modal-close {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@@ -357,7 +357,7 @@ const hideNextArrow = computed(() => {
transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;
} }
.sm-image-gallery-modal-close:hover { .image-gallery-modal-close:hover {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
</style> </style>

6
resources/js/components/SMInputAttachments.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="sm-input-group sm-input-attachments"> <div class="input-attachments">
<label>Attachments</label> <label>Files</label>
<ul> <ul>
<li v-if="mediaItems.length == 0" class="attachments-none"> <li v-if="mediaItems.length == 0" class="attachments-none">
<ion-icon name="sad-outline"></ion-icon> <ion-icon name="sad-outline"></ion-icon>
@@ -137,7 +137,7 @@ handleLoad();
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-input-group.sm-input-attachments { .input-attachments {
display: block; display: block;
label { label {

20
resources/js/components/SMLoadingIcon.vue
View File

@@ -35,22 +35,22 @@ const props = defineProps({
} }
div:nth-child(1) { div:nth-child(1) {
left: 0em; left: 0em;
animation: sm-loading-icon1 0.6s infinite; animation: loading-icon1 0.6s infinite;
} }
div:nth-child(2) { div:nth-child(2) {
left: 0em; left: 0em;
animation: sm-loading-icon2 0.6s infinite; animation: loading-icon2 0.6s infinite;
} }
div:nth-child(3) { div:nth-child(3) {
left: 1em; left: 1em;
animation: sm-loading-icon2 0.6s infinite; animation: loading-icon2 0.6s infinite;
} }
div:nth-child(4) { div:nth-child(4) {
left: 2em; left: 2em;
animation: sm-loading-icon3 0.6s infinite; animation: loading-icon3 0.6s infinite;
} }
@keyframes sm-loading-icon1 { @keyframes loading-icon1 {
0% { 0% {
transform: scale(0); transform: scale(0);
} }
@@ -58,7 +58,7 @@ const props = defineProps({
transform: scale(1); transform: scale(1);
} }
} }
@keyframes sm-loading-icon3 { @keyframes loading-icon3 {
0% { 0% {
transform: scale(1); transform: scale(1);
} }
@@ -66,7 +66,7 @@ const props = defineProps({
transform: scale(0); transform: scale(0);
} }
} }
@keyframes sm-loading-icon2 { @keyframes loading-icon2 {
0% { 0% {
transform: translate(0, 0); transform: translate(0, 0);
} }
@@ -85,17 +85,17 @@ const props = defineProps({
} }
div:nth-child(2) { div:nth-child(2) {
animation: sm-loading-large-icon2 0.6s infinite; animation: loading-large-icon2 0.6s infinite;
} }
div:nth-child(3) { div:nth-child(3) {
left: 3em; left: 3em;
animation: sm-loading-large-icon2 0.6s infinite; animation: loading-large-icon2 0.6s infinite;
} }
div:nth-child(4) { div:nth-child(4) {
left: 6em; left: 6em;
} }
@keyframes sm-loading-large-icon2 { @keyframes loading-large-icon2 {
0% { 0% {
transform: translate(0, 0); transform: translate(0, 0);
} }

8
resources/js/components/SMMessage.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="sm-message-container"> <div class="message-container">
<div :class="['sm-message', type]"> <div :class="['message', type]">
<ion-icon v-if="icon" :name="icon"></ion-icon> <ion-icon v-if="icon" :name="icon"></ion-icon>
<p>{{ message }}</p> <p>{{ message }}</p>
</div> </div>
@@ -25,11 +25,11 @@ defineProps({
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-message-container { .message-container {
justify-content: center; justify-content: center;
align-self: center; align-self: center;
.sm-message { .message {
display: flex; display: flex;
padding: map-get($spacer, 2) map-get($spacer, 3); padding: map-get($spacer, 2) map-get($spacer, 3);
margin-bottom: map-get($spacer, 4); margin-bottom: map-get($spacer, 4);

4
resources/js/components/SMTab.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div v-show="label == selectedLabel" class="sm-tab-content"> <div v-show="label == selectedLabel" class="tab-content">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@@ -18,7 +18,7 @@ const selectedLabel = inject("selectedLabel");
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-tab-content { .tab-content {
padding: map-get($spacer, 3); padding: map-get($spacer, 3);
background-color: #fff; background-color: #fff;
border: 1px solid $border-color; border: 1px solid $border-color;

12
resources/js/components/SMTabGroup.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div class="sm-tab-group"> <div class="tab-group">
<ul class="sm-tab-header"> <ul class="tab-header">
<li <li
v-for="label in tabLabels" v-for="label in tabLabels"
:key="label" :key="label"
:class="['sm-tab-item', { selected: selectedLabel == label }]" :class="['tab-item', { selected: selectedLabel == label }]"
@click="selectedLabel = label"> @click="selectedLabel = label">
{{ label }} {{ label }}
</li> </li>
@@ -24,17 +24,17 @@ provide("selectedLabel", selectedLabel);
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-tab-group { .tab-group {
margin-bottom: map-get($spacer, 4); margin-bottom: map-get($spacer, 4);
.sm-tab-header { .tab-header {
// border-bottom: 1px solid $border-color; // border-bottom: 1px solid $border-color;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.sm-tab-item { .tab-item {
display: inline-block; display: inline-block;
padding: map-get($spacer, 2) map-get($spacer, 3); padding: map-get($spacer, 2) map-get($spacer, 3);
border: 1px solid transparent; border: 1px solid transparent;

2
resources/js/views/Article.vue
View File

@@ -140,7 +140,7 @@ handleLoad();
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.sm-page-post-view .sm-heading-image { .page-post-view .heading-image {
height: 10rem; height: 10rem;
} }
} }

2
resources/js/views/Minecraft.vue
View File

@@ -96,7 +96,7 @@ const downloads = [
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-page-minecraft { .page-minecraft {
h3 { h3 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }

2
resources/js/views/MinecraftCurve.vue
View File

@@ -1055,7 +1055,7 @@ window.onload = function () {
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-page-minecraft-curve { .page-minecraft-curve {
path { path {
stroke-width: 4; stroke-width: 4;
stroke: #000; stroke: #000;

2
resources/js/views/dashboard/EventEdit.vue
View File

@@ -409,7 +409,7 @@ loadData();
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-page-event-edit { .page-event-edit {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
</style> </style>

4
resources/js/views/dashboard/PostEdit.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<SMPage <SMPage
class="sm-page-post-edit" class="page-post-edit"
:page-error="pageError" :page-error="pageError"
permission="admin/posts"> permission="admin/posts">
<template #container> <template #container>
@@ -326,7 +326,7 @@ loadData();
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-page-post-edit { .page-post-edit {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
</style> </style>

4
resources/js/views/dashboard/PostList.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<SMPage permission="admin/posts" class="sm-page-post-list"> <SMPage permission="admin/posts" class="page-post-list">
<template #container> <template #container>
<SMMessage v-if="formMessage" type="error" :message="formMessage" /> <SMMessage v-if="formMessage" type="error" :message="formMessage" />
<SMToolbar> <SMToolbar>
@@ -303,7 +303,7 @@ const handleDelete = async (item) => {
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-page-post-list { .page-post-list {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
</style> </style>