⚡ Consistent CSS class naming for building blocks

Reference: https://cosmomyzrailgorynych.github.io/css-naming-guide/
ct-js · Dec 21, 2021 · f4922c3 · f4922c3
1 parent 4c2e4bb
commit f4922c3
Show file tree

Hide file tree

Showing 86 changed files with 242 additions and 210 deletions.
diff --git a/src/riotTags/app-view.tag b/src/riotTags/app-view.tag
@@ -1,6 +1,6 @@
 app-view.flexcol
     nav.nogrow.flexrow(if="{global.currentProject}")
-        ul#app.nav.tabs
+        ul#app.aNav.tabs
             li.it30#ctlogo(onclick="{changeTab('menu')}" title="{voc.ctIDE}" class="{active: tab === 'menu'}")
                 svg.feather.nmr
                     use(xlink:href="#menu")
@@ -11,7 +11,7 @@ app-view.flexcol
                 svg.feather
                     use(xlink:href="#save")
 
-        ul#mainnav.nav.tabs
+        ul#mainnav.aNav.tabs
             li.nbl.it30(onclick="{runProject}" class="{active: tab === 'debug'}" title="{voc.launch} {voc.launchHotkeys}" data-hotkey="F5")
                 svg.feather.rotateccw(show="{exportingProject}")
                     use(xlink:href="#refresh-ccw")

diff --git a/src/riotTags/debugger/debugger-modal.tag b/src/riotTags/debugger/debugger-modal.tag
@@ -1,4 +1,4 @@
-debugger-modal.view
+debugger-modal.aView
     .center.aQRList
         .aQR(each="{interfaces}")
             div.center(ref="qr" data-address="{address}")

diff --git a/src/riotTags/font-editor.tag b/src/riotTags/font-editor.tag
@@ -1,5 +1,5 @@
-font-editor.panel.view
-    .panel.pad.left.tall.flexfix
+font-editor.aPanel.aView
+    .aPanel.pad.left.tall.flexfix
         .flexfix-body
             fieldset
                 label.block

diff --git a/src/riotTags/fonts-panel.tag b/src/riotTags/fonts-panel.tag
@@ -9,17 +9,17 @@ fonts-panel.flexfix.tall.fifty
         names="{names}"
         ref="fonts"
         class="tall"
-    )
         h1 {voc.fonts}
+        h1 {parent.voc.fonts}
         .toleft
             label.file.flexfix-header
                 input(type="file" multiple
                     accept=".ttf"
                     onchange="{parent.fontImport}")
                 .button
                     svg.feather
-                        use(xlink:href="#download")
                     span {voc.import}
+                    span {parent.voc.import}
     context-menu(menu="{fontMenu}" ref="fontMenu")
     font-editor(if="{editingFont}" fontobj="{editedFont}")
     script.

diff --git a/src/riotTags/main-menu/export-panel.tag b/src/riotTags/main-menu/export-panel.tag
@@ -1,6 +1,6 @@
 export-panel
     .dim
-    .modal.pad.flexfix
+    .aModal.pad.flexfix
         .flexfix-header
             h2.nmt {voc.exportPanel}
         .flexfix-body
@@ -28,7 +28,7 @@ export-panel
                 |
                 span {voc.windowsCrossBuildWarning}
                 span(if="{process.platform === 'darwin'}") {voc.windowsCrossBuildMacOs}
-            .spacer
+            .aSpacer
             h3(if="{log.length}")
                 | {voc.log}
                 .rem.a(onclick="{copyLog}").toright {vocGlob.copy}
@@ -190,4 +190,4 @@ export-panel
 
         this.copyLog = () => {
             nw.Clipboard.get().set(this.log.join('\n'), 'text');
-        };
+        };
diff --git a/src/riotTags/main-menu/icon-panel.tag b/src/riotTags/main-menu/icon-panel.tag
@@ -1,8 +1,8 @@
-icon-panel.view.pad
+icon-panel.aView.pad
     .toright
         button(onclick="{opts.onclose}") {vocGlob.close}
     .clear
-    ul.cards
+    ul.Cards
         li(
             each="{icon in iconList}"
             onclick="{copy(icon)}"

diff --git a/src/riotTags/main-menu/license-panel.tag b/src/riotTags/main-menu/license-panel.tag
@@ -1,4 +1,4 @@
-license-panel.modal.pad
+license-panel.aModal.pad
     .toright(title="{vocGlob.close}")
         span(onclick="{opts.onclose}")
             svg.feather

diff --git a/src/riotTags/main-menu/main-menu-project.tag b/src/riotTags/main-menu/main-menu-project.tag
@@ -10,18 +10,18 @@ main-menu-project
                 use(xlink:href="#package")
             span {voc.zipProject}
         li(onclick="{openIncludeFolder}")
-            .spacer
+            .aSpacer
             span {voc.openIncludeFolder}
     ul.aMenu
         li(onclick="{openProject}")
             svg.feather
                 use(xlink:href="#folder")
             span {voc.openProject}
         li(onclick="{openExample}")
-            .spacer
+            .aSpacer
             span {voc.openExample}
         li(onclick="{toStartScreen}")
-            .spacer
+            .aSpacer
             span {voc.startScreen}
     script.
         this.namespace = 'mainMenu.project';

diff --git a/src/riotTags/new-project-onboarding.tag b/src/riotTags/new-project-onboarding.tag
@@ -1,6 +1,6 @@
 new-project-onboarding
-    .dimmer
-    .panel.flexfix
+    .aDimmer
+    .aPanel.flexfix
         .flexfix-body
             .center
                 svg.anIllustration

diff --git a/src/riotTags/notepad-panel.tag b/src/riotTags/notepad-panel.tag
@@ -1,5 +1,5 @@
-notepad-panel#notepad.panel.dockright(class="{opened: opened}")
-    ul.nav.tabs.nogrow.nb
+notepad-panel#notepad.aPanel.dockright(class="{opened: opened}")
+    ul.aNav.tabs.nogrow.nb
         li(onclick="{changeTab('notepadlocal')}" class="{active: tab === 'notepadlocal'}")
             svg.feather
                 use(xlink:href="#edit")

diff --git a/src/riotTags/particles/emitter-editor.tag b/src/riotTags/particles/emitter-editor.tag
@@ -1,4 +1,4 @@
-emitter-editor.panel.pad.nb
+emitter-editor.aPanel.pad.nb
     .emitter-editor-aHeader
         img.emitter-editor-aTexture(src="{getPreview()}")
         h3 {voc.emitterHeading} {opts.emitter.uid.split('-').pop()}
@@ -302,7 +302,7 @@ emitter-editor.panel.pad.nb
                     value="{parent.opts.emitter.settings.delay}"
                     oninput="{parent.wireAndReset('this.opts.emitter.settings.delay')}"
                 )
-            .spacer
+            .aSpacer
 
     collapsible-section(
         heading="{voc.shapeAndPositioningHeading}"
@@ -392,7 +392,7 @@ emitter-editor.panel.pad.nb
                         value="{parent.opts.emitter.settings.angleStart}"
                         oninput="{parent.wireAndUpdate('this.opts.emitter.settings.angleStart', 'angleStart', true)}"
                     )
-                    .spacer
+                    .aSpacer
                     input.wide(
                         type="range" min="0" max="360" step="1"
                         data-wired-force-minmax="yes"

diff --git a/src/riotTags/particles/emitter-tandem-editor.tag b/src/riotTags/particles/emitter-tandem-editor.tag
@@ -1,7 +1,7 @@
-emitter-tandem-editor.panel.view.flexrow
+emitter-tandem-editor.aPanel.aView.flexrow
     .flexfix(style="width: {panelWidth}px")
         .flexfix-header
-            .panel.pad.nbt.nbl.nbr
+            .aPanel.pad.nbt.nbl.nbr
                 b {vocGlob.name}
                 br
                 input.wide(type="text" value="{tandem.name}" onchange="{wire('this.tandem.name')}")
@@ -32,7 +32,7 @@ emitter-tandem-editor.panel.view.flexrow
         .emitter-tandem-editor-Tools.flexrow
             button.nogrow.forcebackground(onclick="{resetEmitters}")
                 span {voc.reset}
-            .spacer
+            .aSpacer
             button.nogrow.forcebackground(onclick="{openPreviewTexturePicker}")
                 svg.feather
                     use(xlink:href="#texture")
@@ -51,7 +51,7 @@ emitter-tandem-editor.panel.view.flexrow
                 |
                 |
                 b {Math.round(zoom * 100)}%
-            .spacer
+            .aSpacer
             zoom-slider(onchanged="{setZoom}" ref="zoomslider" value="{zoom}")
     color-picker(
         ref="previewBackgroundColor" if="{changingPreviewColor}"

diff --git a/src/riotTags/particles/fx-panel.tag b/src/riotTags/particles/fx-panel.tag
@@ -1,4 +1,4 @@
-fx-panel.panel.view
+fx-panel.aPanel.aView
     asset-viewer.tall(
         collection="{global.currentProject.emitterTandems}"
         contextmenu="{showTandemPopup}"

diff --git a/src/riotTags/particles/particle-importer.tag b/src/riotTags/particles/particle-importer.tag
@@ -1,7 +1,7 @@
-particle-importer.panel.view
+particle-importer.aPanel.aView
     .flexfix.tall
         .flexfix-body
-            ul.cards
+            ul.Cards
                 li(
                     each="{texture in textures}"
                     onclick="{onselected(texture)}"

diff --git a/src/riotTags/patreon-screen.tag b/src/riotTags/patreon-screen.tag
@@ -12,7 +12,7 @@ patron-line
     span(if="{!opts.patron['18+'] && opts.patron.about}") {parent.getEmoji(opts.patron.name)}
     script.
 
-patreon-screen.view(style="z-index: 100;")
+patreon-screen.aView(style="z-index: 100;")
     .Confetti
         .aConfettiPiece(each="{confetti in (new Array(15))}" style="background: {getConfettiColor()}")
     h1 {voc.patronsHeader}

diff --git a/src/riotTags/project-selector.tag b/src/riotTags/project-selector.tag
@@ -1,8 +1,8 @@
 project-selector
     #bg.stretch.flexcol
-        .spacer
-        #intro.panel.flexfix.nogrow
-            ul.nav.tabs.flexfix-header.nb
+        .aSpacer
+        #intro.aPanel.flexfix.nogrow
+            ul.aNav.tabs.flexfix-header.nb
                 li(class="{active: tab === 'projects'}" onclick="{changeTab('projects')}")
                     span {voc.latest}
                 li(class="{active: tab === 'examples'}" onclick="{changeTab('examples')}")
@@ -46,8 +46,10 @@ project-selector
                         onclick="{loadRecentProject}"
                         title="{project}"
                     )
-                        img(src="{getProjectThumbnail(project)}")
-                        span {getProjectName(project)}
+                        .Cards-aThumbnail
+                            img(src="{getProjectThumbnail(project)}")
+                        .Cards-Properties
+                            span {getProjectName(project)}
                         .aCard-Actions
                             button.tiny(onclick="{cloneProject}" title="{voc.cloneProject}")
                                 svg.feather
@@ -61,7 +63,7 @@ project-selector
                     ref="projectname"
                 )
                 button.nm.inline(onclick="{openProjectFolder}") {voc.newProject.button}
-        .spacer
+        .aSpacer
         .aVersionNumber.nogrow
             a(href="https://github.com/orgs/ct-js/" title="{voc.github}" onclick="{openExternal('https://github.com/orgs/ct-js/')}")
                 svg.icon

diff --git a/src/riotTags/project-settings/project-settings.tag b/src/riotTags/project-settings/project-settings.tag
@@ -1,4 +1,4 @@
-project-settings.panel.view.pad.flexrow
+project-settings.aPanel.aView.pad.flexrow
     -
         var tabs = ['authoring', 'actions', 'branding', 'content', 'modules', 'scripts', 'rendering', 'export'];
         var iconMap = {
@@ -13,7 +13,7 @@ project-settings.panel.view.pad.flexrow
             default: 'settings'
         };
     aside.nogrow.noshrink
-        ul.nav.tabs.vertical
+        ul.aNav.tabs.vertical
             // A bit of Pug sorcery, destroyed by Riot.js syntax
             // Iterate over an array of sections. Template out Riot syntax inside `these` backticks.
             each name in tabs
@@ -22,7 +22,7 @@ project-settings.panel.view.pad.flexrow
                         use(xlink:href=`#${(name in iconMap)? iconMap[name] : iconMap.default}`)
                     span='{voc.' + name + '.heading}'
         h3(if="{modulesWithFields.length}") {voc.catmodsSettings}
-        ul(if="{modulesWithFields.length}").nav.tabs.vertical
+        ul(if="{modulesWithFields.length}").aNav.tabs.vertical
             li(
                 each="{module in modulesWithFields}"
                 onclick="{openModuleSettings(module)}"
@@ -33,7 +33,7 @@ project-settings.panel.view.pad.flexrow
                     use(xlink:href=`#{getIcon(module)}`)
                 span {module.manifest.main.name}
         h3(if="{currentProject.contentTypes && currentProject.contentTypes.length}") {voc.contentTypes}
-        ul(if="{currentProject.contentTypes && currentProject.contentTypes.length}").nav.tabs.vertical
+        ul(if="{currentProject.contentTypes && currentProject.contentTypes.length}").aNav.tabs.vertical
             li(
                 each="{contentType in currentProject.contentTypes}"
                 onclick="{openContentType(contentType)}"

diff --git a/src/riotTags/project-settings/tabs/actions-input-selector.tag b/src/riotTags/project-settings/tabs/actions-input-selector.tag
@@ -1,5 +1,5 @@
 actions-input-selector
-    .panel.flexfix
+    .aPanel.flexfix
         .flexfix-header
             .aSearchWrap.wide
                 input.wide(

diff --git a/src/riotTags/project-settings/tabs/actions-settings.tag b/src/riotTags/project-settings/tabs/actions-settings.tag
@@ -35,7 +35,7 @@ actions-settings
                         input.wide(type="text" placeholder="{voc.inputActionNamePlaceholder}" value="{action.name}" onchange="{checkActionNameAndSave}")
                         .anErrorNotice(if="{nameTaken === action.name}" ref="errors") {vocGlob.nametaken}
                         .anErrorNotice(if="{action.name.trim() === ''}" ref="errors") {vocGlob.cannotBeEmpty}
-                    .spacer
+                    .aSpacer
                     svg.feather.a(title="{voc.deleteAction}" onclick="{deleteAction}")
                         use(xlink:href="#x")
             .c8.npr.npl.breakon800
@@ -68,7 +68,7 @@ actions-settings
                 svg.feather
                     use(xlink:href="#upload")
                 span {voc.exportActionPreset}
-    .dimmer(show="{addingMethod}")
+    .aDimmer(show="{addingMethod}")
         actions-input-selector(action="{editedAction}" ref="methodSelector")
     script.
         global.currentProject.actions = global.currentProject.actions || [];

diff --git a/src/riotTags/project-settings/tabs/branding-settings.tag b/src/riotTags/project-settings/tabs/branding-settings.tag
@@ -11,13 +11,13 @@ branding-settings
             onselected="{updateGameIcon}"
             header="{voc.icon}"
         )
-    .spacer
+    .aSpacer
     .block
         b
             span {voc.accent}
             hover-hint(text="{voc.accentNotice}")
         color-input(onchange="{wire('global.currentProject.settings.branding.accent', true)}" color="{global.currentProject.settings.branding.accent}")
-    .spacer
+    .aSpacer
     .block.checkbox
         input(type="checkbox" value="{global.currentProject.settings.branding.invertPreloaderScheme}" checked="{global.currentProject.settings.branding.invertPreloaderScheme}" onchange="{wire('this.currentProject.settings.branding.invertPreloaderScheme')}")
         span {voc.invertPreloaderScheme}

diff --git a/src/riotTags/project-settings/tabs/content-subsystem/content-settings.tag b/src/riotTags/project-settings/tabs/content-subsystem/content-settings.tag
@@ -7,7 +7,7 @@ content-settings
 
     // References to `this` get weird here.
     // See https://v3.riotjs.vercel.app/api/#yield-and-loops
-    collapsible-section.panel(each="{type in contentTypes}" contentType="{type}")
+    collapsible-section.aPanel(each="{type in contentTypes}" contentType="{type}")
         yield(to="header")
             h3
                 svg.feather

diff --git a/src/riotTags/project-settings/tabs/modules/modules-settings.tag b/src/riotTags/project-settings/tabs/modules/modules-settings.tag
@@ -1,4 +1,4 @@
-modules-settings.panel.view
+modules-settings.aPanel.aView
     collapsible-section.aModuleFilter(heading="{voc.filter}" defaultstate="closed" storestatekey="modulesFilter")
         .flexrow
             label.nogrow

diff --git a/src/riotTags/project-settings/tabs/script-editor.tag b/src/riotTags/project-settings/tabs/script-editor.tag
@@ -1,4 +1,4 @@
-script-editor.view
+script-editor.aView
     .flexfix.tall
         div.flexfix-header
             b {voc.name}

diff --git a/src/riotTags/rooms/copy-custom-properties-modal.tag b/src/riotTags/rooms/copy-custom-properties-modal.tag
@@ -8,7 +8,7 @@
         A function that changes whether this modal is shown
 
 copy-custom-properties-modal
-    .panel.flexfix(ref="widget" style='overflow: auto; max-height: 600px')
+    .aPanel.flexfix(ref="widget" style='overflow: auto; max-height: 600px')
         h2.flexfix-header {voc.customProperties}
         .flexfix-body
             table.wide.aPaddedTable

diff --git a/src/riotTags/rooms/room-copy-properties.tag b/src/riotTags/rooms/room-copy-properties.tag
@@ -1,4 +1,4 @@
-room-copy-properties.panel
+room-copy-properties.aPanel
     b {voc.position}:
     .aPoint2DInput.compact.wide
         label
@@ -9,7 +9,7 @@ room-copy-properties.panel
                 oninput="{wire('this.opts.copy.x')}"
                 value="{opts.copy.x}"
             )
-        .spacer
+        .aSpacer
         label
           span.nogrow Y:
           |
@@ -28,7 +28,7 @@ room-copy-properties.panel
                 oninput="{wire('this.opts.copy.tx')}"
                 value="{opts.copy.tx === void 0 ? 1 : opts.copy.tx}"
             )
-        .spacer
+        .aSpacer
         label
             span.nogrow Y:
             |
@@ -46,7 +46,7 @@ room-copy-properties.panel
                     value="{opts.copy.tr || 0}"
                     oninput="{wire('this.opts.copy.tr')}"
                 )
-            .spacer
+            .aSpacer
             input.compact(
                 min="0" max="360" step="1" type="number"
                 value="{opts.copy.tr || 0}"
@@ -62,4 +62,4 @@ room-copy-properties.panel
             if (this.opts.copy && !this.opts.copy.exts) {
                 this.opts.copy.exts = {};
             }
-        });
+        });