Changeset 9262

Timestamp:

11/07/2019 05:16:30 PM (5 years ago)

Author:

iandunn

Message:

WordPress.tv: Add responsive styles to improve UX.

Props nvwd, BrashRebel, iandunn
Fixes #974

Location:

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2

Files:

• anon-upload-template.php (modified) (5 diffs)
• front-page.php (modified) (1 diff)
• header.php (modified) (1 diff)
• sidebar.php (modified) (1 diff)
• style.css (modified) (29 diffs)

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php

@@ -28 +28 @@
         }
 
-        .page-template-anon-upload-template-php #footer {
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            left: 0;
-        }
-
         .video-upload {
-            padding-bottom: 70px;
+            ;
         }
 
@@ -49 +42 @@
         .video-upload-left {
             max-width: 550px;
+
         }
 
@@ -55 +49 @@
             width: 390px;
             margin: -25px 0 25px;
+
+
+
+
+
+
+
+
         }
 
@@ -73 +75 @@
             float: left;
             font-weight: bold;
+
+
+
+
+
+
+
         }
 
@@ -94 +103 @@
             background-color: #fff;
             padding: 4px;
-            width: 329px;
+            width: ;
             max-width: 329px;
         }
 
         .video-upload-left ul.cats-checkboxes {
-            margin-left: 130px;
             height: 150px;
             overflow: auto;

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/front-page.php

@@ -50 +50 @@
 
                 <li class="group">
-                    <a href="<?php the_permalink(); ?>" rel="bookmark">
                         <span class="video-thumbnail">
+
                             <?php $wptv->the_video_image( 50, null, false ); ?>
+
                         </span>
-                        <span class="video-title"><?php the_title(); ?></span>
-                    </a>
+                        <span class="video-title">
+                            <a href="<?php the_permalink(); ?>" rel="bookmark">
+                                <?php the_title(); ?>
+                            </a>
+                        </span>
                     <?php $wptv->the_event( '<strong class="video-event">', '</strong>' ); ?>
                 </li>

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/header.php

@@ -16 +16 @@
     <meta charset="<?php bloginfo( 'charset' ); ?>">
 
+
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/sidebar.php

@@ -1 +1 @@
 <div class="secondary-content">
     <ul>
-        <li>
+        <li>
             <h3><?php esc_html_e( 'Resources', 'wptv' ); ?></h3>
 

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/style.css

@@ -87 +87 @@
 }
 
-/* Contain floats */
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear: both;
-}
-
-.group {
-    *zoom: 1;
+iframe {
+    max-width: 100%;
 }
 
@@ -110 +100 @@
     background: #fff;
     color: #444;
-}
-
-.group:after {
-    content: ".";
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden;
 }
 
@@ -247 +229 @@
 #header {
     margin-top: 10px;
-    height: 57px;
+    padding: 0 30px;
+}
+
+#header:after {
+    clear: both;
+    content: '';
+    display: table;
 }
 
 #header h1 {
     padding-top: 8px;
-    float: left;
 }
 
 #header .sleeve {
-    width: 942px;
+    width: 942px;
     margin: 0 auto;
 }
 
-#menu ul {
-    float: right;
-    height: 57px;;
+/* Menu */
+
+#menu {
+    clear: both;
+    padding: 10px 0;
 }
 
 #menu li {
-    float: left;
-    display: block;
-    margin-left: 10px;
-    line-height: 57px;
-}
+    display: inline-block;
+    font-size: 14px;
+    margin-left: 0;
+    border-bottom: 1px solid white;
+}
+
+#menu li:last-child {
+    border-bottom: none;
+}
+
+#menu li a {
+    border: 0;
+    padding: 0 5px;
+}
+
+#menu #searchform {
+    margin: 0 0 0 15px;
+}
+
 
 #menu li a,
 #menu li a:link,
 #menu li a:visited {
-    padding: 5px;
-    color: #555;
     text-decoration: none;
-    border: 0;
 }
 
@@ -289 +289 @@
 }
 
-#searchform {
-    float: right;
-    margin-left: 15px;
+#menu.toggled .menu-primary-container {
+    display: block;
 }
 
@@ -304 +303 @@
     height: 15px;
     padding: 5px 6px;
-    width: 140px;
+    width: ;
     -webkit-appearance: textfield;
 }
@@ -322 +321 @@
     box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 }
+
+
 
 input[type=submit], button, .button {
@@ -397 +398 @@
 }
 
+
+
 .intro {
     font-size: 30px;
@@ -1480 +1483 @@
 }
 
-#content {
-    width: 100%;
-    float: left;
-}
-
 #content .post {
     margin-bottom: 20px;
@@ -1785 +1783 @@
 }
 
-.container {
-    width: 940px;
+.
+#page > .container {
     margin: auto;
+
+
 }
 
 .primary-content {
-    float: left;
-    width: 700px;
+    flex: 1 1 650px;
     margin: 0;
 }
 
 .secondary-content {
-    float: right;
-    width: 200px;
-    margin: 0 0 50px 0;
+    flex: 1 1 auto;
+    margin: 0 30px;
 }
 
@@ -1869 +1867 @@
 /* Typography
 ============================================================= */
-
-/* Menu */
-
-#menu {
-    margin-right: 5px;
-}
-
-#menu li {
-    font-size: 14px;
-}
-
-#menu li a,
-#menu li a:link,
-#menu li a:visited {
-    color: #21759b;
-}
-
-#menu li a.selected {
-    color: #545454;
-}
-
-#menu li a:hover,
-#menu li a:focus {
-    color: #d54e21;
-}
-
-#menu #searchform {
-    margin: 0 0 0 15px;
-}
 
 /* Titles and Body Text */
@@ -1919 +1888 @@
 
 .page-title {
-    width: 940px;
+    width: 940px;
     margin: auto;
 }
@@ -1927 +1896 @@
     font-weight: bold;
     -webkit-font-smoothing: antialiased;
+
 }
 
@@ -2016 +1986 @@
 
 .wptv-hero {
-    clear: both;
-
-    margin: 10px auto 30px auto;
-    padding: 30px 0 10px 0;
-
+    margin: 10px auto 30px;
+    padding: 30px 0 10px;
     background: #F0F0F0;
 }
@@ -2026 +1993 @@
 .wptv-hero .main-video {
     background: #2f2f2f;
-    clear: both;
-
-    float: left;
-    width: 575px;
+    margin: 0 auto;
+    max-width: 575px;
+    position: relative;
 }
 
 .wptv-hero .main-video .video-player {
-    width: 100% !important;
-    height: 323px !important;
     margin: 0 !important;
 }
@@ -2051 +2015 @@
 
 .wptv-hero .main-video .video-player .videopress-title,
-.wptv-hero .main-video .video-player .videopress-watemark {
+.wptv-hero .main-video .video-player .videopress-watemark {
     display: none !important;
 }
@@ -2097 +2061 @@
 
 .wptv-hero .secondary-videos {
-    float: right;
-    width: 345px;
+    ;
+    5px;
 }
 
@@ -2112 +2076 @@
 .wptv-hero .secondary-videos li {
     font-size: 13px;
-
-    min-height: 75px;
-    position: relative;
-
-    margin: 0 auto 23px 0;
-    padding: 0 0 0 142px;
+    margin: 0 auto 23px;
+    max-width: 130px;
 }
 
@@ -2123 +2083 @@
     width: 130px;
     height: 75px;
-
-    position: absolute;
-    left: 0;
 }
 
@@ -2136 +2093 @@
 
 .video-list {
-    clear: both;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -5px;
+}
+
+.video-list:after {
+    content: '';
+    flex: auto;
 }
 
 .video-list li {
-    float: left;
-    min-height: 220px;
+    flex: 0 0 160px;
     margin-bottom: 20px;
+
 }
 
@@ -2148 +2112 @@
     display: block;
     width: 100%;
-    height: 100px;
 
     margin: 0 0 8px 0;
@@ -2159 +2122 @@
     width: 100%;
     min-height: 100px;
-}
-
-.video-list.four-col {
-    width: 860px;
-}
-
-.video-list.four-col li {
-    width: 160px;
-    margin-right: 20px;
 }
 
@@ -2204 +2158 @@
 }
 
-.archive.video-list .video-thumbnail {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 220px;
-    height: 120px;
-
-    margin: 0 20px 0 0;
-}
-
 .archive.video-list .video-title {
     font-size: 16px;
     margin: 4px 0 8px;
-}
-
-.archive.video-list .video-description {
-    display: block;
-    padding-left: 240px;
 }
 
@@ -2281 +2219 @@
 
 /* Video Player and Placeholder */
-
-.single .video-player {
-    float: left;
-    width: 940px !important;
-    height: 529px !important;
-
-    overflow: hidden;
-}
 
 .videopress-placeholder,
@@ -2419 +2349 @@
 
 .category .page-title {
-    float: left;
-    width: auto;
-    margin: -8px 0 20px 0;
+    flex: 0 0 25%;
+    margin: -8px auto 20px;
 }
 
 .desc {
-    float: right;
+    fl;
     color: #969696;
     margin: 3px 0 20px 0;
-}
-
-.category-wordcamptv .secondary-content {
-    float: left;
-    width: 200px;
-}
-
-.category-wordcamptv .primary-content {
-    float: right;
-    margin: 0;
+    text-align: center;
 }
 
@@ -2452 +2372 @@
 .secondary-content ul {
     margin: 0 0 40px 0;
+
+
+
+
+
 }
 
@@ -2469 +2394 @@
 }
 
-.secondary-content li.widget {
-    border: 0;
-}
-
 /* 404 page
 ============================================================= */
 
 .error404 .primary-content {
-    width: 940px;
+    width: 940px;
 }
 
@@ -2513 +2434 @@
 #footer {
     background: #f0f0f0;
-    clear: both;
     color: #888;
-    height: 3.5em;
-    margin: 10px 0 15px 0;
+    margin: 10px 0 0 0;
     padding: 10px 0;
 }
 
 #footer .automattic {
-    width: 400px;
-    float: right;
-    text-align: right;
     font-size: 11px;
     letter-spacing: 0.2em;
-    line-height: 3em;
+    line-height: 28px;
+    padding-right: 2px;
     padding-top: 13px;
-    padding-right: 2px;
+    ;
     text-transform: uppercase;
-    line-height: 28px;
 }
 
@@ -2541 +2457 @@
 .menu-footer-container,
 #footer div.menu {
-    float: left;
     line-height: 4em;
-    margin-left: 2px;
     font-size: 13px;
     margin-bottom: 0;
-}
-
-.menu-footer-container li,
-#footer div.menu li {
-    display: inline-block;
-    margin: 0 10px;
+    text-align: center;
 }
 
@@ -2588 +2497 @@
     display: inline;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+