Skip to content

Commit e30232e

Browse files
david-poindexterdavid-poindexter
authored
Merge pull request #146 from Timo-Breumelhof/feature/141-blog-module-detail-width
Feature/141 blog module detail width
2 parents edd770b + 72499b6 commit e30232e

File tree

6 files changed

+254
-53
lines changed

6 files changed

+254
-53
lines changed

‎Templates/Blog/CommunityBlog/PostBanner.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<figure>
22
<picture>
33
<img title="[post:localizedtitle]"
4-
src="[settings:imagehandlerpath]?TabId=[module:tabid]&ModuleId=[module:moduleid]&Blog=[Post:blogid]&Post=[Post:contentitemid]&w=1140&h=400&c=0&key=[Post:image]"
4+
src="[settings:imagehandlerpath]?TabId=[module:tabid]&ModuleId=[module:moduleid]&Blog=[Post:blogid]&Post=[Post:contentitemid]&w=1140&h=600&c=0&key=[Post:image]"
55
class="img-fluid" />
66
</picture>
77
</figure>

‎Templates/Blog/CommunityBlog/PostDetails.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@
66
<div class="supertitle">[subtemplate|Cat.html|categories]</div>
77
<h1>[Post:localizedtitle]</h1>
88
</header>
9-
<div class="row">
10-
<div class="col-md-12">
11-
[subtemplate|Postbanner.html|Post:hasimage]
12-
</div>
13-
</div>
149
<div class="row">
1510
<div class="col-md-8">
11+
<div class="blog-image">
12+
[subtemplate|Postbanner.html|Post:hasimage]
13+
14+
</div>
1615
<div class="clearfix"><strong>[resx:WrittenBy]</strong> [post:DisplayName]
1716
<div data-time="[post:PublishedOnDate|yyyy-MM-dd HH:mm:ss]" class="momentabs">
1817
[post:PublishedOnDate|yyyy-MM-dd]</div>

‎_src/theme/scss/modules/_blog.scss

+71-46
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,83 @@
1-
.blog-latest{
2-
&-item{
3-
// border: solid 1px $col1-700;
4-
padding: 0.8em 0.9em;
5-
background: lighten($gray-100, 5%);
6-
position:relative;
7-
8-
h3{
9-
font-size: 1.1em;
10-
margin: 0.5em 0;
11-
color: $col1-800 !important
12-
}
13-
14-
height: 100%;
15-
min-height: 100%;
16-
17-
18-
}
1+
.ModBlogC {
2+
3+
.blog-latest {
4+
&-item {
5+
// border: solid 1px $col1-700;
6+
padding: 0.8em 0.9em;
7+
background: lighten($gray-100, 5%);
8+
position: relative;
9+
10+
h3 {
11+
font-size: 1.1em;
12+
margin: 0.5em 0;
13+
color: $col1-800 !important
14+
}
15+
16+
height: 100%;
17+
min-height: 100%;
18+
1919

20-
&-link{
21-
display:flex;
22-
flex-direction: column ;
23-
position:relative;
24-
min-height: 100%;
25-
&:hover{
26-
color: $red;
2720
}
2821

29-
&:visited{
30-
color: $gray-500;
22+
&-link {
23+
display: flex;
24+
flex-direction: column;
25+
position: relative;
26+
min-height: 100%;
27+
28+
&:hover {
29+
color: $red;
30+
}
31+
32+
&:visited {
33+
color: $gray-500;
34+
}
3135
}
32-
}
3336

34-
&-text-wrap{
37+
&-text-wrap {
38+
39+
flex-grow: 1;
40+
}
41+
42+
&-text {
43+
text-overflow: ellipsis;
44+
overflow: hidden;
45+
max-height: 4.5em;
46+
margin-bottom: 1em;
47+
48+
}
49+
50+
&-details {
51+
font-size: 0.9em;
52+
color: $gray-600;
53+
border-top: solid 1px $gray-200;
54+
padding-top: 0.3em;
55+
}
56+
57+
58+
.col-12 {
59+
padding-bottom: 1.8em;
60+
}
3561

36-
flex-grow: 1;
37-
}
38-
&-text{
39-
text-overflow: ellipsis;
40-
overflow:hidden;
41-
max-height: 4.5em;
42-
margin-bottom: 1em;
43-
4462
}
4563

46-
&-details{
47-
font-size: 0.9em;
48-
color: $gray-600;
49-
border-top: solid 1px $gray-200;
50-
padding-top: 0.3em;
64+
// Details side bar heading margin
65+
.dnnc-blog-metadata {
66+
h5 {
67+
margin-top: 0;
68+
}
5169
}
70+
}
5271

72+
// Make sure blog details are full width (see https://github.com/DNNCommunity/DNNCommunityTheme/issues/141)
73+
// Depends on the class injected by Style Helper
5374

54-
.col-12{
55-
padding-bottom: 1.8em;
56-
}
75+
.blogs-detail {
76+
.panes {
77+
.main-blog-module{
78+
79+
width: 100% !important;
5780

58-
}
81+
}
82+
}
83+
}

‎blog.ascx

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<%@ Control Language="c#" AutoEventWireup="false"
2+
Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
3+
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
4+
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
5+
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
6+
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/CopyRight.ascx" %>
7+
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
8+
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
9+
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
10+
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
11+
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
12+
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
13+
<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>
14+
15+
16+
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
17+
<%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>
18+
19+
20+
<!-- #include file="Includes/font-awesome.ascx" -->
21+
22+
23+
24+
<fortyfingers:STYLEHELPER id="FFSH1"
25+
AddToHead="<meta http-equiv='X-UA-Compatible' content='IE=edge'>
26+
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />"
27+
AddAtEnd="false"
28+
RemoveFromHead="content=text/javascript"
29+
AddBodyClass="True"
30+
ForceSkinCssOrder="true"
31+
doctype="html 5"
32+
runat="server" />
33+
34+
35+
<fortyfingers:STYLEHELPER id="FFSH2"
36+
IfUrl="/blogs/Post/"
37+
AddToBodyClass="blogs-detail"
38+
runat="server" />
39+
40+
41+
42+
<div class="wrap-skin">
43+
44+
<!-- Page content wrapper-->
45+
<div class="page-content-wrapper">
46+
<div class="sticky-top">
47+
<!-- #include file="Includes/top-bar-login-search.ascx" -->
48+
<header class="skin-header">
49+
<div class="header-top">
50+
</div>
51+
<div class="container">
52+
<div class="row">
53+
<div class="logo col col-6 col-lg-3 flex-vert-align">
54+
<!-- #include file="Includes/logo.ascx" -->
55+
</div>
56+
<div class="col d-lg-none text-end d-flex justify-content-end align-items-center">
57+
<button id="navbar-toggler" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
58+
</div>
59+
<!-- Top navigation-->
60+
<div class="col-12 col-lg">
61+
<nav class="navbar navbar-expand-lg">
62+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
63+
<dnn:MENU MenuStyle="assets/menus/topmenu" runat="server" ExcludeNodes="Admin,Host"></dnn:MENU>
64+
</div>
65+
</nav>
66+
</div>
67+
</div>
68+
</div>
69+
</header>
70+
</div>
71+
<!-- #include file="Includes/panes-blog.ascx" -->
72+
<footer class="skin-footer bg-blue-super-dark skew-top">
73+
<div class="container py-5">
74+
<div class="row gx-5">
75+
<div class="col">
76+
<div class="pane footer_pane_1 col" id="footer_pane_1" runat="server">
77+
</div>
78+
</div>
79+
<div class="col">
80+
<div class="pane footer_pane_2 col" id="footer_pane_2" runat="server">
81+
</div>
82+
</div>
83+
<div class="col">
84+
<div class="pane footer_pane_3 col" id="footer_pane_3" runat="server">
85+
</div>
86+
</div>
87+
<div class="col">
88+
<div class="pane footer_pane_4 col" id="footer_pane_4" runat="server">
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
<div class="pane footer_pane_full_width pb-0" id="footer_pane_full_width" runat="server">
94+
</div>
95+
<div class="footer-bottom">
96+
<div class="container pt-2">
97+
<div class="row">
98+
<!-- #include file="Includes/footer-bottom.ascx" -->
99+
</div>
100+
</div>
101+
</div>
102+
</footer>
103+
</div>
104+
105+
<!-- Bootstrap core JS-->
106+
<dnn:DnnJsInclude runat="server" ForceProvider="DnnFormBottomProvider" FilePath="vendors/bootstrap/js/bootstrap.bundle.min.js" PathNameAlias="SkinPath" />
107+
108+
109+
<!-- Core theme JS-->
110+
<dnn:DnnJsInclude runat="server" ForceProvider="DnnFormBottomProvider" FilePath="vendors/theme/js/scripts.js" PathNameAlias="SkinPath" />
111+
112+

‎includes/panes-blog.ascx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!-- Page content-->
2+
<main class="skin-main content-wrap">
3+
<div class="pane pane-top py-0" id="top_pane_full_width" ContainerSrc="DNN-Community-2024/NoTitle.ascx" runat="server" />
4+
<div class="bg-blue skew-bottom panes mt-0">
5+
<div class="container">
6+
<div class="row gx-5">
7+
<div class="col-12">
8+
<div class="pane pane-blue text-white" id="top_pane" runat="server" />
9+
</div>
10+
<div class="col-12 col-md-6">
11+
<div class="pane pane-blue text-white" id="top_pane_left" runat="server" />
12+
</div>
13+
<div class="col-12 col-md-6">
14+
<div class="pane pane-blue text-white" id="top_pane_right" runat="server" />
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
<div class="bg-grey skew-top skew-bottom panes">
20+
<div class="container">
21+
<div class="row gx-5">
22+
<div class="col col-12">
23+
<div class="pane pane-grey" id="pane_grey_100" runat="server" />
24+
</div>
25+
<div class="col col-md-6">
26+
<div class="pane pane-grey" id="pane_grey_50_left" runat="server" />
27+
</div>
28+
<div class="col col-md-6">
29+
<div class="pane pane-grey" id="pane_grey_50_right" runat="server" />
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="skew-top skew-bottom panes">
35+
<div class="container">
36+
<div class="row">
37+
<div class="col col-12">
38+
<div class="pane content-pane" id="contentpane" runat="server" />
39+
</div>
40+
</div>
41+
<div class="row gx-5">
42+
<div class="col col-12 col-md-8 main-blog-module">
43+
<div class="pane content-pane-66" id="blog_pane_left" runat="server" />
44+
</div>
45+
<div class="col col-12 col-md-4">
46+
<div class="pane content-pane-33" id="blog_pane_right" runat="server" />
47+
</div>
48+
</div>
49+
<div class="row">
50+
<div class="col col-12">
51+
<div class="pane blog-bottom-pane" id="blog_pane_bottom" runat="server" />
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</main>
57+
<div class="bg-grey skew-top skew-bottom panes">
58+
<div class="container">
59+
<div class="row gx-5">
60+
<div class="col col-12">
61+
<div class="pane pane-grey" id="pane_grey_100_bottom" runat="server" />
62+
</div>
63+
</div>
64+
</div>
65+
</div>

‎skin.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)