css container i18nlabel

gigamaster · Nov 12, 2024 · ee8c700 · ee8c700
1 parent 1ddaa94
commit ee8c700
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/livecodes/UI/embed-ui.ts b/src/livecodes/UI/embed-ui.ts
@@ -434,7 +434,7 @@ export default function App() {
       nonEmbeddedUrl.searchParams.delete('lite');
       const projectUrl = decodeURIComponent(nonEmbeddedUrl.href);
       return `
-<iframe title="${title}" scrolling="no" loading="lazy" style="height:300px; width: 100%; border:1px solid black; border-radius:4px;" src="${iframeUrl}">
+<iframe title="${title}" scrolling="no" loading="lazy" style="height:300px; width: 100%; border:1px solid black; border-radius:6px;" src="${iframeUrl}">
   See the project <a href="${projectUrl}" target="_blank">${title}</a> on <a href="${livecodesUrl}" target="_blank">LiveCodes</a>.
 </iframe>
 `.trimStart();

diff --git a/src/livecodes/i18n/locales/ja/translation.ts b/src/livecodes/i18n/locales/ja/translation.ts
@@ -527,7 +527,7 @@ const translation: I18nTranslation = {
       gist: 'GitHub Gistにエクスポート',
       heading: 'エクスポート',
       jsfiddle: 'JSFiddleで編集',
-      json: 'プロジェクトをエクスポート（JSON）',
+      json: 'エクスポート (JSON)',
       result: '結果をエクスポート（HTML）',
       src: 'ソースをエクスポート（ZIP）',
     },
@@ -644,7 +644,7 @@ const translation: I18nTranslation = {
   savePrompt: {
     heading: '未保存の変更',
     prompt: {
-      cancel: 'キャンセル',
+      cancel: '消去',
       discard: '保存しない',
       heading: '変更が保存されていない可能性があります。<1></1>今すぐ保存しますか？',
       save: '保存',
@@ -886,7 +886,7 @@ const translation: I18nTranslation = {
       heading: '最近',
     },
     recover: {
-      cancel: 'キャンセル',
+      cancel: '消去',
       heading: '復元',
       lastModified: '最終更新: <1></1>',
       recover: '復元',

diff --git a/src/livecodes/styles/inc-menu.scss b/src/livecodes/styles/inc-menu.scss
@@ -196,7 +196,7 @@
     color: inherit;
     display: inherit;
     justify-content: space-between;
-    padding: var(--s6) var(--s8); // TODO css var rel to li height (fontsize+padding)
+    padding: var(--s6) var(--s8);
     text-decoration: none;
     white-space: nowrap;
     width: 100%;
@@ -229,7 +229,7 @@
     display: flex;
     flex-grow: 1;
     justify-content: space-between;
-    padding: 6px 8px; // TODO css var rel to li height (fontsize+padding)
+    padding: var(--s6) var(--s8);
 
     input[type='range'] {
       width: 8em;
@@ -256,7 +256,7 @@
   position: absolute !important;
   right: unset;
   top: 0;
-  width: 230px; // todo css var + for font-size 14px
+  width: 234px;
 
   &:hover {
     display: block !important;
@@ -376,10 +376,22 @@ i.arrow {
   }
 }
 
+label:has(span[data-i18n="menu.formatOnsave"], span[data-i18n="menu.recoverUnsaved"]) {
+  container: i18nlabel / inline-size; // Parent to set font-size based on size of container
+  white-space: nowrap;
+}
+
+@container i18nlabel (width < 236px) {
+  span {
+    font-size: 5.25cqi; // font-size based on size of container
+  }
+}
+
+
 .switch {
   cursor: pointer;
   display: inherit;
-  padding: 6px 8px; // TODO css var rel to li height (fontsize+padding)
+  padding: var(--s6) var(--s8);
   width: 100%;
 
   span {