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>
<div class="sm-captcha-notice">
<div class="captcha-notice">
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/terms">Terms of Service</a> apply.
@@ -7,7 +7,7 @@
</template>
<style lang="scss">
.sm-captcha-notice {
.captcha-notice {
color: $secondary-color;
font-size: 65%;
line-height: 1.2rem;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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