Neutralise styling for user content on portfolio pages

  and reflect the changes for tinymce editor view too

  behatnotneeded

  Bug #1465107

Change-Id: Icb3fe00d7639e9709557c399089be389412dc2ac

htdocs/theme/raw/plugintype/blocktype/externalfeed/templates/feed.tpl

@@ -14,8 +14,8 @@
             {foreach from=$entries item=entry}
             <div class="list-group-item">
                 {if $entry->link}<a href="{$entry->link}">{/if}
-                
-                <h4 class="title list-group-item-heading mb0">
+
+                <h4 class="title feedtitle list-group-item-heading mb0">
                     {$entry->title}
                 </h4>
                 <span class="postdetails metadata text-small">
@@ -23,7 +23,7 @@
                 </span>
 
                 {if $entry->link}</a>{/if}
-                <div class="feedcontent mtl text-small">{$entry->description|clean_html|safe}</div>
+                <div class="feedcontent mtl">{$entry->description|clean_html|safe}</div>
              </div>
             {/foreach}
         <div>
@@ -50,4 +50,3 @@
         </div>
     </div>
 </div>
-

htdocs/theme/raw/sass/features/_user-pages.scss

+// User content in portfolio pages is within panels which need some unstyling first.
+// Users also have access to a full WYSIWYG editor so some content for that needs styles.
+// This styling is scoped to user-page-content which appears on the edit and display page pages.
+
+.user-page-content,
+#tinymce {
+
+    // Unstyle panel elements
+    .panel .panel-body table,
+    .panel .panel-body table thead,
+    .panel-body ul {
+        color: $theme-text-color;
+        font-size: $font-size-base;
+    }
+
+    .panel-body small {
+        color: $theme-text-color;
+    }
+
+    .panel-body ul:not(.list-unstyled):not(.unstyled):not(.select2-selection__rendered) {
+        padding-left: 40px;
+    }
+
+    pre {
+        background-color: transparent;
+        border: 0px none;
+        color: $theme-text-color;
+        font-size: $font-size-base;
+        padding: 0;
+    }
+
+    h1,
+    h2,
+    .panel-body h3,
+    .feedcontent h3,
+    .mce-content-body,
+    h4,
+    h5,
+    h6,
+    .list-group-item-heading {
+        font-family: $font-family-base;
+        font-weight: bold;
+    }
+
+    h1 {
+        border-bottom: 0px none;
+        padding: 0;
+    }
+
+    h4.feedtitle {
+        font-size: $font-size-h2;
+    }
+
+    blockquote {
+        border-left-color: $theme-text-color;
+        font-size: $font-size-base;
+    }
+
+    // Add styling for tinymce or external feed created elements
+
+    .feedcontent .wp-smiley {
+        width: 18px;
+    }
+
+    .feedcontent h1,
+    .feedcontent h2,
+    .feedcontent h3,
+    .feedcontent h4,
+    .feedcontent h5,
+    .feedcontent h6 {
+        font-size: $font-size-h3;
+    }
+
+    table {
+        border-spacing: 0;
+    }
+
+    table,
+    table td {
+        border: 1px solid $gray-light;
+    }
+
+    table td {
+        padding:2px 5px;
+    }
+}

htdocs/theme/raw/sass/layout/panel/_panel.scss

@@ -28,7 +28,7 @@
         dd {
             color: $gray;
             line-height: 1.5em;
-        font-size: 0.9em;
+            font-size: 0.9em;
         }
     }
     .nav-pills {

htdocs/theme/raw/sass/tinymce.scss

@@ -20,3 +20,5 @@
 @import "typography/typography";
 @import "typography/tables";
 @import "typography/text";
+
+@import "features/user-pages";

htdocs/theme/raw/sass/utilities/_index.scss

@@ -81,6 +81,7 @@
 @import "../features/message-thread";
 @import "../features/notification"; // email style notification panels
 @import "../features/option-alt";
+@import "../features/user-pages";
 
 
 // Supporting sass for library code

htdocs/theme/raw/templates/user/view.tpl

@@ -139,4 +139,3 @@
 </div>
 
 {include file="footer.tpl"}
-

htdocs/theme/raw/templates/view/blocks.tpl

@@ -33,7 +33,7 @@
             </div>
             <div class="col-with-collapse">
                 <div id="bottom-pane" data-role="workspace">
-                    <div id="column-container">
+                    <div id="column-container" class="user-page-content">
                         {$columns|safe}
                     </div>
                 </div>

htdocs/theme/raw/templates/view/view.tpl

@@ -93,7 +93,7 @@
 
 <div id="view">
     <div id="bottom-pane">
-        <div id="column-container">
+        <div id="column-container" class="user-page-content">
             {$viewcontent|safe}
         </div>
     </div>