Changeset 1591

Timestamp:

05/18/2015 04:05:14 PM (10 years ago)

Author:

nacin

Message:

Better responsive Trac styles. props ryelle. see #1030.

Location:

sites/trunk/wordpress.org/public_html/style

Files:

• trac/wp-trac.css (modified) (11 diffs)
• wp4.css (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

@@ -349 +349 @@
     line-height: 1.1;
 }
-#properties .fullrow input {
-    width: 97.5%;
-}
-#properties .col1 input {
-    width: 87.5%;
-}
-#properties .col2 input {
-    width: 92.5%;
+#properties {
+    white-space: normal;
+}
+#properties table td {
+    width: 50%;
+}
+#properties input {
+    width: 100%;
+    box-sizing: border-box;
 }
 #properties table th.col2 {
@@ -744 +745 @@
 #ticketchange .comment {
     margin-left: 0;
+    word-wrap: break-word;
 }
 #changelog .trac-lastedit {
@@ -798 +800 @@
 }
 
+/* Possibly related ticket list */
+.related-tickets li {
+    margin-bottom: 5px;
+}
+
 #propertyform[action*="/newticket"] #properties legend {
     display: none;
@@ -806 +813 @@
     background: none;
 }
-#propertyform[action*="/newticket"] #properties .fullrow input {
-    width: 99.4%;
-}
 #propertyform[action*="/newticket"] #focuses span {
     display: none;
@@ -814 +818 @@
 #propertyform[action*="/newticket"] #properties table td#focuses {
     padding-left: 0;
+}
+#propertyform > p,
+#propertyform > .buttons {
+    margin-left: 10px;
 }
 .set-trunk, .set-trunk:hover {
@@ -1627 +1635 @@
 /* =Responsive / Mobile
 ----------------------------------------------- */
+@media (max-width: 770px) {
+    #headline {
+        height: auto;
+    }
+    #headline .menu {
+        clear: both;
+        float: none;
+        text-align: center;
+        font-size: 16px;
+    }
+    #headline .menu li {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    #banner {
+        position: relative;
+        top: -85px;
+        margin-bottom: -45px;
+    }
+    form#search {
+        float: none;
+        margin-top: 0;
+    }
+    #metanav {
+        position: static;
+        top: 0;
+        right: 0;
+    }
+    .newticket-instructions {
+        margin-left: 1em;
+        margin-right: 1em;
+    }
+    #main .newticket-not-here .support {
+        float: none;
+        min-width: 100%;
+    }
+}
 
 @media (max-width: 640px) {
@@ -1639 +1684 @@
         margin: 1em 0; /* less breathing room */
     }
+    #banner {
+        position: static;
+        margin-bottom: 0;
+    }
+    #banner #search {
+        margin: 10px 0;
+        text-align: left;
+    }
     .nav ul {
         text-align: left; /* move these to the left */
@@ -1659 +1712 @@
         height: auto;
     }
-    #search {
-        margin-bottom: 2em; /* more space below when logo is smaller */
-    }
     #content.ticket, .milestone .info .progress, .milestone .info dl, #content.timeline dl, #stats {
         margin-left: 0; /* use all the available space */
@@ -1682 +1732 @@
         text-align: left;
     }
-    #properties table tr, #properties table th {
-        display: block; /* one col, labels on top */
+    #properties table th,
+    #properties table td {
+        /* one col, labels on top */
+        display: block;
+        padding: 0 !important;
+        width: 100% !important;
     }
     #properties table th {
         padding: 0;
+        margin: 10px 0 5px;
         text-align: left;
     }
@@ -1692 +1747 @@
         border-left: none; /* no columns, no divider */
     }
-    #properties table td.fullrow { /* Webkit fix for overflowing inputs */
-        display: block;
-        width: 95%;
+    #field-description {
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
     }
     .milestone .info .progress {
@@ -1720 +1776 @@
     #footer p.left {
         display: none;
+    }
+}
+@media (max-width: 550px) {
+    .create-new-ticket.button {
+        float: none;
+        margin: 20px 0 0 !important; /* Override inline styles */
+        padding: 0 20px;
+    }
+    .create-new-ticket a {
+        padding: 0;
+    }
+    #ticket .date {
+        position: static;
+        float: none;
+        margin-bottom: 10px;
+    }
+    #trac-ticket-title {
+        margin-top: 10px;
+    }
+    #ticket table.properties th,
+    #ticket table.properties td {
+        display: block;
+        float: left;
+        width: 60%;
+        box-sizing: border-box;
+    }
+    #ticket table.properties th {
+        width: 40%;
+        clear: left;
+    }
+    #ticket table.properties img.avatar {
+        float: left;
+    }
+    #attachments > div.attachments > p {
+        float: none;
+    }
+    #prefs {
+        position: static !important;
+        float: none;
+        margin-top: 10px;
+    }
+    #overview dt.property {
+        position: static;
+        float: none;
+        margin: 10px 0;
+        padding: 0;
+        text-align: left;
+    }
+    #overview dd,
+    #overview dd.message {
+        margin-left: 0;
+        padding: 0;
+    }
+    #help {
+        text-align: left;
+    }
+    #altlinks .preferences-link {
+        float: none;
+    }
+    #main #altlinks h3 {
+        margin-top: 5px;
+    }
+    #changelog .comment ul,
+    #changelog .comment ol,
+    #ticketchange .comment ul,
+    #ticketchange .comment ol {
+        padding-left: 18px;
+    }
+    pre.wiki,
+    pre.literal-block {
+        word-wrap: normal;
     }
 }

sites/trunk/wordpress.org/public_html/style/wp4.css

@@ -39 +39 @@
 }
 
+strong a {
+    font-weight: bold;
+}
+
 a:visited,
 #wporg-footer ul li a:visited {
@@ -48 +52 @@
 h3 a { font-weight: bold; }
 
-.button a, .button a:hover, #headline a:not(.button), #headline a:not(.button):hover, #sidebar a, #sidebar a:hover, .frontpageheatmap a, .frontpageheatmap a:hover, .col-3 a, .col-3 a:hover { border: none !important; }
+.button a, .button a:hover, #headline a:not(.button), #headline a:not(.button):hover, #sidebar a:not(.button), #sidebar a:not(.button):hover, .frontpageheatmap a, .frontpageheatmap a:hover, .col-3 a, .col-3 a:hover { border: none !important; }
 
 #headline a.button { display: inline-block; }