OU blog: Improve styling #3693

moodleou · Mar 12, 2013 · 2fb7aa6 · 2fb7aa6
1 parent 2b67b07
commit 2fb7aa6
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 121 deletions.
diff --git a/allposts.php b/allposts.php
@@ -67,8 +67,6 @@
 $strolderposts  = get_string('olderposts', 'oublog');
 $strfeeds       = get_string('feeds', 'oublog');
 
-$strfeeds       .= '<img src="'.$OUTPUT->pix_url('i/rss') . '" alt="' . get_string('blogfeed',
-        'oublog') . '"  class="feedicon" />';
 $strblogsearch  = get_string('searchblogs', 'oublog');
 
 // Get Posts.
@@ -147,20 +145,21 @@
 // Print blog posts.
 if ($posts) {
     echo '<div id="oublog-posts">';
+    $rowcounter = 1;
+    foreach ($posts as $post) {
+        $post->row = $rowcounter;
+        echo $oublogoutput->render_post($cm, $oublog, $post, $returnurl, $blogtype,
+                $canmanageposts, $canaudit, false, false);
+        $rowcounter++;
+    }
     if ($offset > 0) {
         if ($offset-OUBLOG_POSTS_PER_PAGE == 0) {
-            echo "<a href=\"$returnurl\">$strnewposts</a>";
+            print "<div class='oublog-newerposts'><a href=\"$returnurl\">$strnewposts</a></div>";
         } else {
-            echo "<a href=\"$returnurl&amp;offset=" . ($offset-OUBLOG_POSTS_PER_PAGE) .
-                    "\">$strnewposts</a>";
+            print "<div class='oublog-newerposts'><a href=\"$returnurl&amp;offset=" .
+            ($offset-OUBLOG_POSTS_PER_PAGE) . "\">$strnewposts</a></div>";
         }
     }
-
-    foreach ($posts as $post) {
-        echo $oublogoutput->render_post($cm, $oublog, $post, $returnurl, $blogtype,
-                $canmanageposts, $canaudit, false, false);
-    }
-
     if ($recordcount - $offset > OUBLOG_POSTS_PER_PAGE) {
         echo "<a href=\"$returnurl&amp;offset=" . ($offset+OUBLOG_POSTS_PER_PAGE) .
                 "\">$strolderposts</a>";

diff --git a/lang/en/oublog.php b/lang/en/oublog.php
@@ -68,8 +68,8 @@
 $string['edit'] = 'Edit';
 $string['delete'] = 'Delete';
 
-$string['olderposts'] = '&lt; Older posts';
-$string['newerposts'] = 'Newer posts &gt;';
+$string['olderposts'] = 'Previous posts';
+$string['newerposts'] = 'Newer posts';
 $string['extranavolderposts'] = 'Older posts: {$a->from}-{$a->to}';
 $string['extranavtag'] = 'Tag: {$a}';
 

diff --git a/locallib.php b/locallib.php
@@ -1155,7 +1155,7 @@ function oublog_get_links($oublog, $oubloginstance, $context) {
         foreach ($links as $link) {
             $i++;
             $html .= '<li>';
-            $html .= '<a href="'.htmlentities($link->url).'">'.format_string($link->title).'</a> ';
+            $html .= '<a href="'.htmlentities($link->url).'" class="oublog-elink">'.format_string($link->title).'</a> ';
 
             if ($canmanagelinks) {
                 if ($i > 1) {
@@ -1604,9 +1604,9 @@ function oublog_get_feedblock($oublog, $bloginstance, $groupid, $postid, $cm, $i
         $commentsurlrss = oublog_get_feedurl('rss',  $oublog, $bloginstance, $groupid, true, $postid, $cm, $individualid);
     }
 
-    $html  = get_string('subscribefeed', 'oublog');
+    $html  = '<div id="oublog-feedtext">' . get_string('subscribefeed', 'oublog') . '</div>';
     $html .= $OUTPUT->help_icon('feedhelp', 'oublog');
-    $html .= '<br />';//<br /><img src="'.$OUTPUT->pix_url('i/rss').'" alt="'.get_string('blogfeed', 'oublog').'"  class="feedicon" />';
+    $html .= '<div class="oublog-feedlinks">';
     $html .= get_string('blogfeed', 'oublog').': ';
     $html .= '<a href="'.$blogurlatom.'">'.get_string('atom', 'oublog').'</a> ';
     $html .= '<a href="'.$blogurlrss.'">'.get_string('rss', 'oublog').'</a>';
@@ -1619,6 +1619,7 @@ function oublog_get_feedblock($oublog, $bloginstance, $groupid, $postid, $cm, $i
             $html .= '</div>';
         }
     }
+    $html .= '</div>';
     return ($html);
 }
 

diff --git a/renderer.php b/renderer.php
diff --git a/styles.css b/styles.css
@@ -4,6 +4,15 @@
 #oublog-tags a:hover .oublog-tagname{
     text-decoration:underline;
 }
+.oublog-sideblock a:hover,
+#oublog-links a:hover,
+.oublog-post-links a:hover,
+.oublog-post-top a:hover,
+.oublog-post-bottom a:hover,
+.oublog-paging a:hover,
+.oublog-postedby a:hover {
+    text-decoration:underline;
+}
 
 #oublog-feeds a {
     text-decoration:none;
@@ -12,6 +21,10 @@
     text-decoration:underline;
 }
 
+.oublog-post-date a, .oublog-post-tags a, .oublog-post-links a, .oublog-post-editsummary a, .oublog-post-attachments a {
+    text-decoration: none;
+}
+
 .oublog-tagcount {
     margin-left:2px;
     font-size: 0.85em;
@@ -41,13 +54,16 @@
     margin-bottom:1em;
 }
 
-.oublog-post, .oublog-comment {
-    border: 1px solid #ddd;
-    margin: 0 0 1em;
-    padding: 0.5em;
-    background-color: #FCFCFC;
+.oublog-post {
+    padding: 1em;
     min-height:0; /* ie7 */
 }
+.oublog-post.oublog-odd, .oublog-post-commented {
+    background-color: #F2F2F2;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
 .oublog-sideblock {
     border: 1px solid #ddd;
     margin: 0 0 1em;
@@ -69,6 +85,12 @@
 .ie6 .oublog-comment li {
     height:auto;
 }
+.oublog-post .oublog-post-top {
+    margin-bottom: 1em;
+}
+.oublog-post .oublog-post-top-details {
+    margin-left: 80px;
+}
 
 .oublog-post-date, .oublog-post-visibility, .oublog-post-tags, .oublog-post-links, .oublog-post-editsummary, .oublog-links {
     font-size: 0.85em;
@@ -78,24 +100,23 @@
     margin-bottom:0.7em;
 }
 
-.oublog-post-links {
-    margin-bottom:1.5em;
+.oublog-post-links a {
+    margin-right: 1em;
 }
 
 .oublog-postedby {
-    font-size: 0.85em;
     margin-top: 0.4em;
     margin-bottom: 0.4em;
 }
 
 .oublog-post-visibility {
-    margin-top: 0.4em;
-    color:#aaa;
+    margin-bottom: 0.4em;
+    font-weight: bold;
 }
 
 .oublog-post h2.oublog-title {
     margin: 0 0 0.5em 0;
-    font-size:1em;
+    font-size: 1.2em;
 }
 
 .oublog-post h3.oublog-title {
@@ -107,11 +128,29 @@
     border-bottom-color: #aaaaaa;
 }
 
+.oublog-post .oublog-post-attachments {
+    float: right;
+    padding: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    background-color: #E7E7E7;
+    width: 200px;
+    margin-bottom: 1em;
+    font-size: 0.85em;
+}
+.oublog-post .oublog-post-attachment {
+    display: inline;
+    word-break: break-all;
+    margin-right: .75em;
+}
+
 .oublog-post-content,
 .oublog-comment-content {
     margin:0.4em 0;
     margin-bottom:1.2em;
     min-height:0; /* ie7... */
+    clear: both;
 }
 .ie6 .oublog-post-content,
 .ie6 .oublog-comment-content {
@@ -123,13 +162,46 @@
     color: #aaa;
 }
 
+.oublog-paging {
+    border-top: 1px solid #F2F2F2;
+    margin-top: .5em;
+    margin-bottom: 1em;
+}
 
 #oublog-single-post-view .oublog-post {
     border: none;
     background-color: transparent;
     padding: 0;
 }
+#oublogcomments {
+    padding: 1em;
+}
+#oublogcomments.oublogpartcomments {
+    background-color: #F2F2F2;
+}
+#oublogcomments .oublog-comment {
+    padding: 1em;
+    background-color: #FFFFFF;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    margin-bottom: .5em;
+}
+
+#oublogcomments .oublog-comment h2.oublog-commentstitle {
+    margin-top: 0;
+    padding-bottom: .5em;
+    border-bottom: 1px solid #F2F2F2;
+}
 
+.oublog-comment .oublog-userpic {
+    margin-right: 10px;
+    margin-bottom: 1em;
+}
+.oublog-comment h2.oublog-title {
+    margin: 0 0 0.5em 0;
+    font-weight: normal;
+}
 .oublog-comment h2.oublog-comment-title {
     margin: 0 0 0.5em 0;
     font-size:1em;
@@ -174,7 +246,6 @@
     font-weight: bold;
 }
 .oublog-comment-deletedby {
-    margin-left: -42px;
     margin-bottom: 8px;
 }
 
@@ -202,23 +273,14 @@
   margin-left:13em;
 }
 
-.oublog-post.oublog-hasuserpic,
-.oublog-comment.oublog-hasuserpic {
-  padding-left:50px;
-  position:relative;
-}
 .oublog-userpic {
-  position:absolute;
-  left:8px;
-}
-/* I don't like CSS hacks, but unfortunately standard Moodle does not have the
-   OU's .ie6 class on body. */
-* html .oublog-hasuserpic {
-  padding-left:0;
-  margin-left:50px;
+    float: left;
+    width: 70px;
+    padding-top: .25em;
 }
-* html .oublog-userpic {
-  left:-42px;
+.oublog-userpic .userpicture {
+    width: 70px;
+    height: 70px;
 }
 
 #page-mod-oublog-view .groupselector {
@@ -271,12 +333,16 @@ div.oublog-individualselector {
 }
 
 .oublog-newerposts {
-    margin: 1.5em 0 2em;
+    margin: .5em 0 1em;
+    float: right;
 }
 .oublog-olderposts {
-    margin: 0 0 2em;
+    margin: .5em 0 1em;
+    float: left;
+}
+.oublog-newerposts a, .oublog-olderposts a {
+    text-decoration: none;
 }
-
 #page-mod-oublog-participation table#participation {
     margin-top: 1em;
 }
@@ -294,3 +360,12 @@ div.oublog-individualselector {
 #page-mod-oublog-editpost .fp-pathbar {
     display: none;
 }
+#oublog-links a {
+    text-decoration: none;
+}
+#oublog-feedtext {
+    font-size: 0.85em;
+}
+.oublog-feedlinks a {
+    text-decoration: none;
+}
diff --git a/version.php b/version.php
@@ -23,7 +23,7 @@
  * @package oublog
  **/
 
-$module->version  = 2013011800;
+$module->version  = 2013012400;
 $module->requires = 2011120100;
 $module->cron     = 60*60*4; // 4 hours.
 

diff --git a/view.php b/view.php
@@ -286,7 +286,7 @@
         $feedicon = ' <img src="'.$OUTPUT->pix_url('i/rss').'" alt="'.get_string('blogfeed', 'oublog').'"  class="feedicon" />';
         $bc = new block_contents();
         $bc->attributes['class'] = 'oublog-sideblock block';
-        $bc->title = $strfeeds . $feedicon;
+        $bc->title = $strfeeds;
         $bc->content = $feeds;
         $PAGE->blocks->add_fake_block($bc, BLOCK_POS_RIGHT);
     }
@@ -369,6 +369,14 @@
 // Print blog posts.
 if ($posts) {
     echo '<div id="oublog-posts">';
+    $rowcounter = 1;
+    foreach ($posts as $post) {
+        $post->row = $rowcounter;
+        echo $oublogoutput->render_post($cm, $oublog, $post, $returnurl, $blogtype,
+                $canmanageposts, $canaudit, true, false);
+        $rowcounter++;
+    }
+    echo "<div class='oublog-paging'>";
     if ($offset > 0) {
         if ($offset-OUBLOG_POSTS_PER_PAGE == 0) {
             print "<div class='oublog-newerposts'><a href=\"$returnurl\">$strnewposts</a></div>";
@@ -378,16 +386,11 @@
         }
     }
 
-    foreach ($posts as $post) {
-        echo $oublogoutput->render_post($cm, $oublog, $post, $returnurl, $blogtype,
-                $canmanageposts, $canaudit, true, false);
-    }
-
     if ($recordcount - $offset > OUBLOG_POSTS_PER_PAGE) {
         print "<div class='oublog-olderposts'><a href=\"$returnurl&amp;offset=" .
                 ($offset+OUBLOG_POSTS_PER_PAGE) . "\">$strolderposts</a></div>";
     }
-    echo '</div>';
+    echo '</div></div>';
 }
 
 // Print information allowing the user to log in if necessary, or letting

diff --git a/viewpost.php b/viewpost.php
@@ -124,15 +124,15 @@
 
 // Print blog posts.
 echo '<div id="middle-column" >';
-
+echo '<div class="oublog-post-commented">';
 echo $oublogoutput->render_post($cm, $oublog, $post, $returnurl, $blogtype, $canmanageposts,
         $canaudit, false, false);
 
 if (!empty($post->comments)) {
     // Code extracted to new renderer function.
     echo $oublogoutput->render_comments($post, $oublog, $canaudit, $canmanagecomments, false, $cm);
 }
-
+echo '</div>';
 // If it is your own post, then see if there are any moderated comments -
 // for security reasons, you must also be allowed to comment on the post in
 // order to moderate it (because 'approving' a comment is basically equivalent