Changeset 11069

Timestamp:

06/26/2021 03:30:52 PM (4 years ago)

Author:

ocean90

Message:

Translate: Fix layout of editor for glossary entries and increase font sizes used in meta column of the translation editor.

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates

Files:

• style.css (modified) (17 diffs)
• translation-row-editor.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

@@ -9 +9 @@
 .gp-content input {
     color: #1e1e1e;
+}
+
+.gp-content textarea {
+    max-width: 100%;
+}
+
+.gp-content textarea,
+.gp-content select,
+.gp-content input {
+    font-size: 1em;
 }
 
@@ -316 +326 @@
 }
 
-p.actionlist {
+p.actionlist,
+div.actionlist,
+h2 + .glossary-description,
+h2 + .project-description {
     margin-top: 1em;
     margin-bottom: 1em;
 }
-
 
 @media screen and (max-width: 960px) {
@@ -402 +414 @@
 }
 
+table.glossary a.action,
 table.translations a.action {
     color: #1e1e1e;
@@ -407 +420 @@
 }
 
+table.glossary a.action:hover,
 table.translations a.action:hover {
     color: #000;
@@ -460 +474 @@
 }
 
-table.translations td:first-child,
-table.translations th:first-child,
-table.translation-sets td:first-child,
-table.translation-sets th:first-child,
-table.locales td:first-child,
-table.locales th:first-child,
-table.glossary th:first-child,
-table.glossary td:first-child,
-table.locale-sub-projects th:first-child,
-table.locale-sub-projects td:first-child {
-    border-left: 1px solid #72777c;
+table.locales tr,
+table.glossary tr,
+table.locale-sub-projects tr,
+table.translation-sets tr,
+table.translations tr {
+    box-shadow: -1px 0px 0px #72777c;
 }
 
 table.translations tr:nth-child(4n+3),
+table.glossary tr:nth-child(4n+3),
 table.locale-sub-projects tr:nth-child(even),
 .translation-sets tr,
@@ -480 +490 @@
 }
 
+.glossary tr.view:hover,
 .translations tr.preview:hover,
 .translation-sets tr:nth-child(odd):hover,
@@ -547 +558 @@
 }
 
-.editor .original {
-    margin-bottom: 1em;
-}
-
-.editor .textareas textarea {
+/* Glossary editor */
+table.glossary .editor .strings {
     width: 100%;
-    box-sizing: border-box;
-}
-
-.editor .strings {
-    width: 60%;
-    float: left;
-}
-
-.editor .meta {
-    background: #fff;
-    border: 1px solid #72777c;
-    font-size: 13px;
-    margin: 0;
-    padding: 5px 10px;
-    width: 39%;
-    float: right;
-    box-sizing: border-box;
-}
-
-.editor .meta h3 {
-    text-align: center;
-    border-bottom: 1px solid #72777c;
-    margin-bottom: 15px;
-}
-
-button.approve strong {
-    color: #46b450;
-}
-
-button.reject strong {
-    color: #dc3232;
-}
-
-button.fuzzy strong {
-    color: #f56e28;
-}
-
-.editor .refs li {
-    font-size: 12px;
-    word-wrap: break-word;
-}
-
-.editor .meta dl {
-    margin: .4em 0;
-}
-
-.editor .clear + .plural-numbers {
-    margin-top: 15px;
-}
-
-.editor .strings .textareas:last-child,
-.editor .plural-numbers + .textareas {
-    margin-bottom: 30px;
-}
-
-.editor .textareas + .clear {
-    margin-top: 30px;
-}
-
-.editor .actions {
-    margin-top: 30px;
-}
-
-.editor .actions .ok {
+    float: none;
+}
+
+table.glossary .editor .strings dt {
+    margin-bottom: 2px;
+}
+
+table.glossary .editor .strings dd {
+    margin-bottom: 10px;
+}
+
+table.glossary .editor .strings p {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-top: 20px;
+}
+
+table.glossary .editor .strings p button {
     font-size: 14px;
     height: 26px;
-    vertical-align: middle;
-}
-
-.strings dt {
-    margin-bottom: 2px;
-}
-
-.strings dd {
-    margin-bottom: 10px;
-}
-
-.strings textarea {
+}
+
+table.glossary .editor .strings p button + .or-cancel {
+    font-size: 14px;
+    margin-left: .4em;
+}
+
+table.glossary .editor .meta {
+    width: 100%;
+    float: none;
+    margin: 30px 0 0;
+    font-size: 14px;
+}
+
+@media screen and (min-width: 700px) {
+    table.glossary .editor .strings {
+        width: 60%;
+        float: left;
+    }
+
+    table.glossary .editor .meta {
+        width: calc( 40% - 20px );
+        float: right;
+        margin: 0;
+    }
+}
+
+table.glossary .editor .meta dl {
+    margin: 5px 0 0;
+}
+
+table.glossary .editor .meta dl:first-child {
+    margin-top: 0;
+}
+
+table.glossary .editor textarea {
+    width: 100%;
+    resize: vertical;
     box-sizing: border-box;
-    max-width: 100%;
-    resize: vertical;
-    vertical-align: middle;
-}
-
-.strings textarea:-ms-input-placeholder {
-    color: #666;
-}
-
-.strings textarea::-ms-input-placeholder {
-    color: #666;
-}
-
-.strings textarea::placeholder {
-    color: #666;
 }
 
@@ -660 +634 @@
     white-space: pre-wrap;
 }
-
 
 .glossary-word {
@@ -913 +886 @@
 
 .locale {
-    border: 1px solid #ccc;
+    border: 1px solid #72777c;
     box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     background: #fff;
@@ -2366 +2339 @@
 /* NEW EDITOR */
 
-.editor .strings {
+.editor-panel .strings {
     float: none;
     width: 100%;
@@ -2372 +2345 @@
 }
 
-.editor .textareas textarea {
+.editor-panel .textareas textarea {
     width: 100%;
     border: 0;
@@ -2384 +2357 @@
 }
 
-.textareas p,
-.textareas blockquote.translation {
+.editor-panel .textareas p,
+.editor-panel .textareas blockquote.translation {
     display: none;
 }
 
-.editor .original {
+.editor-panel .original {
     max-width: 100%;
     font-weight: normal;
@@ -2396 +2369 @@
 }
 
-.editor .original-raw {
+.editor-panel .original-raw {
     display: none;
 }
 
-.editor .meta {
+.editor-panel .meta {
     float: none;
     width: 100%;
-    background: transparent;
-    border: 0;
+    margin: 0;
+    padding: 20px 10px;
+}
+
+.editor-panel .meta .status-actions {
+    margin-bottom: 15px;
+}
+
+.editor-panel .meta .status-actions button {
+    font-size: 14px;
+    height: 26px;
+}
+
+button.approve strong {
+    color: #46b450;
+}
+
+button.reject strong {
+    color: #dc3232;
+}
+
+button.fuzzy strong {
+    color: #f56e28;
+}
+
+.editor-panel .meta dl {
+    font-size: 14px;
+    margin: 5px 0 0;
+}
+
+.editor-panel .meta dl:first-child {
+    margin-top: 0;
 }
 
@@ -2440 +2443 @@
     flex: 0 0 20rem;
     min-width: 1%;
+}
+
+@media screen and (min-width: 700px) {
+    .editor-panel__right {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
 }
 
@@ -2464 +2476 @@
 }
 
-.admin-bar .editor-panel__left .panel-header {
+.admin-bar .editor-panel__left .panel-header,
+.admin-bar .editor-panel__right {
     top: 32px;
 }
 
 @media screen and (max-width: 782px) {
-    .admin-bar .editor-panel__left .panel-header {
+    .admin-bar .editor-panel__left .panel-header,
+    .admin-bar .editor-panel__right {
         top: 46px;
     }
@@ -2641 +2655 @@
 .translation-wrapper {
     padding: 0 10px;
-    margin: 15px 0;
-    border-top: 1px solid;
-    border-bottom: 1px solid;
+    margin: 15px -1px;
+    border: 1px solid;
     border-color: #72777c;
     background: #fff;
@@ -2649 +2662 @@
 
 .translation-wrapper:focus-within {
-    box-shadow:  0 0 2px 1px #33b3db;
+    box-shadow: 0 0 2px 1px #33b3db;
+    border-color: #5b9dd9;
 }
 

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-editor.php

@@ -239 +239 @@
                     <div class="meta">
 
-                        <?php if ( $translation->translation_status ): ?>
+                        <?php if ( $translation->translation_status && ( $can_approve_translation || $can_reject_self ) ): ?>
                             <div class="status-actions">
-                            <?php if ( $can_approve_translation ) : ?>
-                                <?php if ( 'current' !== $translation->translation_status ) : ?>
-                                    <button class="approve" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-current_' . $translation->id ) ); ?>"><strong>+</strong> <?php _e( 'Approve', 'glotpress' ); ?></button>
-                                <?php endif; ?>
-                                <?php if ( 'rejected' !== $translation->translation_status ) : ?>
-                                    <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $translation->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject', 'glotpress' ); ?></button>
-                                <?php endif; ?>
-                                <?php if ( 'fuzzy' !== $translation->translation_status ) : ?>
+                                <?php if ( $can_approve_translation ) : ?>
+                                    <?php if ( 'current' !== $translation->translation_status ) : ?>
+                                        <button class="approve" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-current_' . $translation->id ) ); ?>"><strong>+</strong> <?php _e( 'Approve', 'glotpress' ); ?></button>
+                                    <?php endif; ?>
+                                    <?php if ( 'rejected' !== $translation->translation_status ) : ?>
+                                        <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $translation->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject', 'glotpress' ); ?></button>
+                                    <?php endif; ?>
+                                    <?php if ( 'fuzzy' !== $translation->translation_status ) : ?>
+                                        <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $translation->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
+                                    <?php endif; ?>
+                                <?php elseif ( $can_reject_self ): ?>
+                                    <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $translation->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject Suggestion', 'glotpress' ); ?></button>
                                     <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $translation->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
                                 <?php endif; ?>
-                            <?php elseif ( $can_reject_self ): ?>
-                                <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $translation->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject Suggestion', 'glotpress' ); ?></button>
-                                <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $translation->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
-                            <?php endif; ?>
                             </div>
                         <?php endif; ?>