align CSS/HTML selectors with i18n naming convention

lingua-libre · May 23, 2024 · 343ae43 · 343ae43
1 parent 22fe4e7
commit 343ae43
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 96 deletions.
diff --git a/SignItCoreContent.js b/SignItCoreContent.js
@@ -21,9 +21,9 @@ var SignItCoreContent = function (locale) {
   console.log("Passed trough ! :", locale);
   console.log("SignItCoreContent.js",banana );
   this.$container = $(`
-		<div class="signit-popup-container">
+		<div class="signit-modal-container">
 			<h1></h1>
-			<div class="signit-popup-content">
+			<div class="signit-modal-content">
         <div class="signit-panel-videos">
           <div class="signit-panel-videos signit-novideo">
             <h2>Media:
@@ -34,11 +34,11 @@ var SignItCoreContent = function (locale) {
         </div>
 				<div class="signit-panel-separator"></div>
         <div class="signit-panel-definitions">
-          <div class="signit-panel-definitions signit-definition">
+          <div class="signit-panel-definitions signit-definitions">
             <h2>Definition:
             ${ banana.i18n("si-panel-definitions-title",locale) }</h2>
-            <div class="signit-definition-text"></div>
-            <div class="signit-definition-source">
+            <div class="signit-definitions-text"></div>
+            <div class="signit-definitions-source">
               <a href="https://${ banana.i18n("si-panel-definitions-wikt-iso",locale) }.wiktionary.org">
           ${ banana.i18n("si-panel-definitions-wikt-pointer",locale) }</a>
             </div>
@@ -71,9 +71,9 @@ var SignItCoreContent = function (locale) {
     this.$videosPanelContent = this.$container.find(".signit-video");
     this.$videosPanelGallery = new SignItVideosGallery( this.$videosPanelContent );
 
-    this.$definitionPanelContent = this.$container.find(".signit-definition");
-    this.$definitionPanelText = this.$container.find(".signit-definition-text");
-    this.$definitionPanelSource = this.$container.find(".signit-definition-source a");
+    this.$definitionPanelContent = this.$container.find(".signit-definitions");
+    this.$definitionPanelText = this.$container.find(".signit-definitions-text");
+    this.$definitionPanelSource = this.$container.find(".signit-definitions-source a");
     this.$definitionPanelSpinner = this.$container.find(".signit-loading");
     this.$definitionPanelError = this.$container.find(".signit-error");
 

diff --git a/SignItVideosGallery.js b/SignItVideosGallery.js
@@ -4,7 +4,7 @@ var SignItVideosGallery = function ( container ) {
 
 	this.previousVideoButton = new OO.ui.ButtonWidget( { icon: 'previous', framed: false } );
 	this.nextVideoButton = new OO.ui.ButtonWidget( { icon: 'next', framed: false } );
-	this.$videoContainer = $( '<div class="signit-videogallery">' );
+	this.$videoContainer = $( '<div class="signit-panel-videos-gallery">' );
 
 	container.append( this.previousVideoButton.$element ).append( this.$videoContainer ).append( this.nextVideoButton.$element );
 

diff --git a/content_scripts/signit.css b/content_scripts/signit.css
@@ -1,27 +1,27 @@
 /* *************************************************************** */
 /* Modal structure *********************************************** */
-.signit-popup-anchor {
+.signit-modal-anchor {
   position: absolute;
   z-index: -99999; /* put it under everything else so it doesn't disturb anything */
 }
 
 /* *************************************************************** */
 /* Popup outline ************************************************* */
-.signit-popup {
+.signit-modal {
   z-index: 9999;
 } /* above everythings */
 
-.signit-popup .oo-ui-popupWidget-popup {
+.signit-modal .oo-ui-popupWidget-popup {
   max-height: 500px;
 }
 
-.signit-popup .oo-ui-popupWidget-body {
+.signit-modal .oo-ui-popupWidget-body {
   margin: 0;
 }
 
 /* *************************************************************** */
 /* Popup content ************************************************* */
-.signit-popup h1 {
+.signit-modal h1 {
   margin-bottom: 0.6em;
   font-size: 188%;
   color: black;
@@ -34,26 +34,26 @@
   box-shadow: 0 0px 5px -2px black;
 }
 
-.signit-popup h2 {
+.signit-modal h2 {
   display: none;
 }
 
-.signit-popup-content {
+.signit-modal-content {
   display: flex;
   flex: 1;
   align-items: center;
   margin: 0 0.85714286em 0.57142857em;
 }
 
-.signit-popup-content > .signit-panel-separator {
+.signit-modal-content > .signit-panel-separator {
   flex: 0 0 1px;
   margin: 25px 10px;
   background: #a2a9b1;
   align-self: stretch;
 }
 
-.signit-popup-content > .signit-panel-videos,
-.signit-popup-content > .signit-panel-definitions {
+.signit-modal-content > .signit-panel-videos,
+.signit-modal-content > .signit-panel-definitions {
   flex: 0 1 auto;
   width: 400px;
 }
@@ -105,69 +105,69 @@
 
 /* *************************************************************** */
 /* Definition panel (right/bottom) ******************************* */
-.signit-definition-text {
+.signit-definitions-text {
   overflow-y: auto;
   max-height: 340px;
   text-align: left;
 }
 
-.signit-definition-text p,
-.signit-definition-text b,
-.signit-definition-text span,
-.signit-definition-text i,
-.signit-definition-text a,
-.signit-definition-text ol,
-.signit-definition-text li {
+.signit-definitions-text p,
+.signit-definitions-text b,
+.signit-definitions-text span,
+.signit-definitions-text i,
+.signit-definitions-text a,
+.signit-definitions-text ol,
+.signit-definitions-text li {
   all: initial;
   font-size: 16px;
   font-family: sans-serif;
   line-height: 1.42857143em;
   color: #222222;
 }
 
-.signit-definition-text p {
+.signit-definitions-text p {
   margin: 0.4em 0 0.5em 0;
   padding: 0;
   display: block;
 }
 
-.signit-definition-text ol {
+.signit-definitions-text ol {
   list-style-type: decimal;
   margin: 0.3em 0 0 3.2em;
   display: block;
 }
 
-.signit-definition-text ol li {
+.signit-definitions-text ol li {
   display: list-item;
   list-style-type: decimal;
   margin-bottom: 0.8em;
 }
 
-.signit-definition-text i {
+.signit-definitions-text i {
   font-style: italic;
 }
 
-.signit-definition-text b {
+.signit-definitions-text b {
   font-weight: bold;
 }
 
-.signit-definition-text a {
+.signit-definitions-text a {
   color: #0645ad;
 }
 
-.signit-definition-text a:hover {
+.signit-definitions-text a:hover {
   text-decoration: underline;
 }
 
-.signit-definition-text ol ul {
+.signit-definitions-text ol ul {
   display: none;
 }
 
-.signit-definition-text .reference {
+.signit-definitions-text .reference {
   display: none;
 }
 
-.signit-definition-source {
+.signit-definitions-source {
   height: 20px;
   text-align: right;
   margin-top: 4px;

diff --git a/content_scripts/signit.js b/content_scripts/signit.js
@@ -140,10 +140,10 @@
 		var activePanels = await browser.storage.local.get( 'choosepanels' ); 
 		activepanels = Object.values( activePanels)[0];
 		console.log('toggle: ', activePanels, activepanels )
-		$(".signit-popup-content > *").hide();
-		$(".signit-popup-content > .signit-panel-videos").toggle(activepanels == 'definition'?false:true);
-		$(".signit-popup-content > .signit-panel-separator").toggle(activepanels == 'both'?true:false);
-		$(".signit-popup-content > .signit-panel-definitions").toggle(activepanels == 'video'? false:true);
+		$(".signit-modal-content > *").hide();
+		$(".signit-modal-content > .signit-panel-videos").toggle(activepanels == 'definition'?false:true);
+		$(".signit-modal-content > .signit-panel-separator").toggle(activepanels == 'both'?true:false);
+		$(".signit-modal-content > .signit-panel-definitions").toggle(activepanels == 'video'? false:true);
 	}
 
 	/* *************************************************************** */
@@ -159,7 +159,7 @@
 
 		// Setup an absolute-positionned $anchorModal we can programatically move
 		// to be able to point exactly some coords with our popup later
-		$anchorModal = $( '<div class="signit-popup-anchor">' );
+		$anchorModal = $( '<div class="signit-modal-anchor">' );
 		$( 'body' ).append( $anchorModal );
 
 		// Create and add our popup to the DOM
@@ -174,7 +174,7 @@
 			autoFlip: true,
 			hideWhenOutOfView: false,
 			$container: $( 'body' ),
-			classes: [ 'signit-popup' ]
+			classes: [ 'signit-modal' ]
 		} );
 		$( 'body' ).append( popup.$element );
 	}
@@ -204,7 +204,7 @@
 		// refresh with new content, panels check, width.
 		content.refresh( message.text, message.files );
 		showPanels();
-		$( 'signit-popup').css( 'width', signItModalWidth() );
+		$( 'signit-modal').css( 'width', signItModalWidth() );
 		// Show again
 		popup.toggle( true );
 		popup.toggleClipping( false );