Merge pull request #484 from bmlt-enabled/CSS-for-RTL-w/o-WP

CSS for R2L w/o WP
bmlt-enabled · Jul 17, 2024 · 5263251 · 5263251
2 parents 23d3ff7 + 1a877b9
commit 5263251
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 22 deletions.
diff --git a/croutonjs/src/css/bmlt_tabs.css b/croutonjs/src/css/bmlt_tabs.css
@@ -634,3 +634,30 @@ table.tablesaw {
 #meeting-details-title {
 	font-size: 1.5em;
 }
+.bmlt-rtl {
+	direction: rtl;
+}
+#bmlt-header.bmlt-rtl {
+	text-align:right; 
+}
+#nav-days.bmlt-rtl {
+	float:right; 
+}
+#nav-days.bmlt-rtl li {
+	float:right; 
+}
+#bmlt-tabs .bmlt-rtl .bmlt-column1 {
+    text-align: right;
+}
+#bmlt-tabs .bmlt-rtl .bmlt-column2 {
+    text-align: right;
+}
+.bmlt-rtl .marker_div_meeting {
+    text-align: right !important;
+}
+.bmlt-rtl #meeting-details-title {
+    text-align: right;
+}
+.bmlt-rtl #meeting-details-contents td {
+    text-align: right !important;
+}
diff --git a/croutonjs/src/js/crouton-core.js b/croutonjs/src/js/crouton-core.js
@@ -888,7 +888,7 @@ function Crouton(config) {
 	};
 	self.createBmltMapElement = function() {
 		if (!document.getElementById('bmlt-map')) {
-			jQuery("#bmlt-tabs").before("<div id='bmlt-map' class='bootstrap-bmlt bmlt-map bmlt_map_container_div'></div>");
+			jQuery("#bmlt-tabs").before("<div id='bmlt-map' class='bootstrap-bmlt bmlt-map "+self.localization.getWord('css-direction')+" bmlt_map_container_div'></div>");
 		}
 		return 'bmlt-map';
 	}

diff --git a/croutonjs/src/js/crouton-default-templates.js b/croutonjs/src/js/crouton-default-templates.js
@@ -72,7 +72,7 @@ var croutonDefaultTemplates = {
 	<div id="meeting_modal" class="modal bootstrap-bmlt" style="display: none;" tabindex="-1" >
 	<div class="modal-content">
         <span class="modal-title">{{getWord "Meeting Details"}}</span><span id="close_meeting_details" class="modal-close">×</span>
-		<table id="meeting-details-table" class="bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack meeting-details">
+		<table id="meeting-details-table" class="bmlt-table  {{getWord 'css-direction'}} table table-striped table-hover table-bordered tablesaw tablesaw-stack meeting-details">
 			<thead>
         		<th id="meeting-details-title" colspan="2">
 		    		{{> meetingpageTitleTemplate this}}

diff --git a/croutonjs/src/js/crouton-localization.js b/croutonjs/src/js/crouton-localization.js
@@ -38,8 +38,7 @@ function CroutonLocalization(language) {
 				LS: "خدمة المنتديات المحلية",	
 				GS: "Group Support Forum",
 			},
-			'css-textalign': 'style="text-align:right;"',
-			'css-floatdirection': 'style="float:right;"',
+			"css-direction": 'bmlt-rtl',
 			"share": "مشاركة",
 			'tabular': "جدول",
 			'google_directions': 'اتجاهات جوجل للاجتماع',
@@ -524,8 +523,7 @@ function CroutonLocalization(language) {
 			'tabular': "As table",
 			'google_directions': 'Google directions to meeting',
 			"no_meetings_for_this_day": "No meetings for this day.",
-			'css-textalign': 'style="text-align:right;"',
-			'css-floatdirection': 'style="float:right;"',
+			"css-direction": 'bmlt-rtl',
 			'all': 'All',
 			'menu': "Menu",
 			'search for meetings': 'Search for meetings',
@@ -926,7 +924,10 @@ CroutonLocalization.prototype.getDayOfTheWeekWord = function(day_id) {
 
 CroutonLocalization.prototype.getWord = function(word) {
 	const ret = this.words[this.language][word.toLowerCase()];
-	if (typeof ret === 'undefined') return word;
+	if (typeof ret === 'undefined') {
+		if (word === 'css-direction') return '';
+		return word;
+	}
 	return ret;
 };
 

diff --git a/croutonjs/src/templates/byday.hbs b/croutonjs/src/templates/byday.hbs
@@ -1,5 +1,5 @@
 <div id="bmlt-table-div">
-    <table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack'>
+    <table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack {{getWord 'css-direction'}}'>
         {{#each this}}
             <tbody class="bmlt-data-rows h-{{this.day}}">
 			{{#unless this.hide}}

diff --git a/croutonjs/src/templates/byfield.hbs b/croutonjs/src/templates/byfield.hbs
@@ -1,5 +1,5 @@
 <div id="bmlt-table-div">
-	<table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack'>
+	<table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack {{getWord 'css-direction'}}'>
 		<tbody class="byfield.hbs">
 		{{#each this}}
 			<tr class="meeting-header" {{{getWord 'css-textAlign'}}}>

diff --git a/croutonjs/src/templates/formatPopup.hbs b/croutonjs/src/templates/formatPopup.hbs
@@ -1,4 +1,4 @@
-<table class='bmlt_a_format table-bordered'>
+<table class='bmlt_a_format table-bordered {{getWord 'css-direction'}}'>
     {{#each this.formats_expanded}}
         <tr>
             <td class='formats_key'>{{key}}</td>

diff --git a/croutonjs/src/templates/header.hbs b/croutonjs/src/templates/header.hbs
@@ -29,9 +29,9 @@
 
 {{#if this.config.has_tabs}}
     {{#ifEquals this.config.view_by "weekdays"}}
-        <div class="bmlt-page show" id="nav-days" {{{getWord 'css-floatDirection'}}}>
+        <div class="bmlt-page {{getWord 'css-direction'}} show" id="nav-days">
     {{else}}
-        <div class="bmlt-page hide" id="nav-days" {{{getWord 'css-floatDirection'}}}>
+        <div class="bmlt-page {{getWord 'css-direction'}} hide" id="nav-days">
     {{/ifEquals}}
         <ul class="nav nav-tabs">
             {{#each this.config.day_sequence}}

diff --git a/croutonjs/src/templates/main.hbs b/croutonjs/src/templates/main.hbs
@@ -1,25 +1,25 @@
 <div id="bmlt-tabs-table">
-    <div id="bmlt-header" class="bmlt-header hide" {{{getWord 'css-textAlign'}}}>
+    <div id="bmlt-header" class="bmlt-header {{getWord 'css-direction'}} hide">
         {{> header}}
     </div>
 	{{#each this.meetings.buttonFilters}}
-		<div id="byfield_{{ @key }}" class="bmlt-page hide" >
+		<div id="byfield_{{ @key }}" class="bmlt-page {{getWord 'css-direction'}} hide" >
 			{{> byfields this }}
 		</div>
 	{{/each}}
     {{#each this.meetings.buttonFormatFilters}}
-		<div id="byfield_{{ @key }}" class="bmlt-page hide">
+		<div id="byfield_{{ @key }}" class="bmlt-page {{getWord 'css-direction'}} hide">
 			{{> byfields this }}
 		</div>
 	{{/each}}
     {{#if this.config.map_page }}
-    	<div id="byfield_embeddedMapPage" class="bmlt-map bmlt-page hide">
+    	<div id="byfield_embeddedMapPage" class="bmlt-map bmlt-page {{getWord 'css-direction'}} hide">
 		</div>
     {{/if}}
-    <div id="byday" class="bmlt-page hide">
+    <div id="byday" class="bmlt-page {{getWord 'css-direction'}} hide">
         {{> bydays this.meetings.bydays}}
     </div>
-    <div id="tabs-content" class="bmlt-page">
+    <div id="tabs-content" class="bmlt-page {{getWord 'css-direction'}}">
         {{> weekdays this.meetings.weekdays}}
     </div>
     {{> meetingCountTemplate }}

diff --git a/croutonjs/src/templates/mapMenu.hbs b/croutonjs/src/templates/mapMenu.hbs
@@ -24,11 +24,11 @@
         {{/each}}
     </div>
 </div>
-<div id="table_page" class="bmlt-page hide" >
+<div id="table_page" class="bmlt-page {{getWord 'css-direction'}} hide" >
     <div id="bmlt-maptable-header"><span class="map-list-title">{{getWord 'Visible meeting list'}}</span><span id="close_table" class="table-close">X</span></div>
     <div id="bmlt-maptable-div"  style="position:relative; overflow-y:scroll;">
 
-        <table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack'>
+        <table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack {{getWord 'css-direction'}}'>
         {{#each this.meetings.bydays}}
             {{> meetings this.meetings }}
         {{/each}}

diff --git a/croutonjs/src/templates/weekdays.hbs b/croutonjs/src/templates/weekdays.hbs
@@ -2,7 +2,7 @@
     {{#each this}}
         <div id='tab{{ day }}' class='tab-pane'>
             <div id="bmlt-table-div">
-                <table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack'>
+                <table class='bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack {{getWord 'css-direction'}}'>
                     <tbody class="weekdays.hbs">
 						{{#greaterThan this.meetings.length 0}}
 							{{> meetings this.meetings }}

diff --git a/partials/default_meeting_details.html b/partials/default_meeting_details.html
@@ -1,5 +1,5 @@
 [bmlt_handlebar]
-<table id="meeting-details-table" class="bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack meeting-details">
+<table id="meeting-details-table" class="bmlt-table table table-striped table-hover table-bordered tablesaw tablesaw-stack meeting-details {{getWord 'css-direction'}}">
 	<thead>
         <th id="meeting-details-title" colspan="2">
 		    {{> meetingpageTitleTemplate this}}