Skip to content

Commit 591bd58

Browse files
mpauloskyMatthew Pauloksycsharpfritz
authored
A fix for Issue 186 Adds a TreeView menu closes #186 (#195)
Adds to the Site.Master a TreeView styled simular to the AfterBlazorServerSide NavMenu.razor Co-authored-by: Matthew Pauloksy <[email protected]> Co-authored-by: Jeffrey T. Fritz <[email protected]>
1 parent f0e0636 commit 591bd58

File tree

4 files changed

+249
-41
lines changed

4 files changed

+249
-41
lines changed

‎samples/BeforeWebForms/Content/Site.css‎

Lines changed: 131 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,145 @@
11
/* Move down content because we have a fixed navbar that is 50px tall */
22
body {
3-
padding-top: 50px;
4-
padding-bottom: 20px;
5-
}
6-
7-
/* Wrapping element */
8-
/* Set some basic padding to keep content from hitting the edges */
9-
.body-content {
10-
padding-left: 15px;
11-
padding-right: 15px;
3+
padding-top: 10px;
4+
padding-bottom: 20px;
5+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
126
}
137

148
/* Set widths on the form inputs since otherwise they're 100% wide */
159
input,
1610
select,
1711
textarea {
18-
max-width: 280px;
12+
max-width: 280px;
1913
}
2014

21-
2215
/* Responsive: Portrait tablets and up */
2316
@media screen and (min-width: 768px) {
24-
.jumbotron {
25-
margin-top: 20px;
26-
}
17+
.jumbotron {
18+
margin-top: 20px;
19+
}
20+
}
21+
22+
a, .btn-link {
23+
color: #0366d6;
24+
}
25+
26+
a.component-link {
27+
color: #0366d6;
28+
text-decoration: underline;
29+
}
30+
31+
a.component-link.active {
32+
font-weight: bold;
33+
color: inherit;
34+
background-color: lightgrey;
35+
text-decoration: none !important;
36+
}
37+
38+
.btn-primary {
39+
color: #fff;
40+
background-color: #1b6ec2;
41+
border-color: #1861ac;
42+
}
43+
44+
.top-row {
45+
height: 3.5rem;
46+
display: flex;
47+
}
48+
49+
.main {
50+
flex: 1;
51+
padding-bottom: 50px;
52+
}
53+
54+
footer {
55+
border-top: 1px solid purple;
56+
background-color: #EEE;
57+
font-size: 0.7em;
58+
font-weight: bold;
59+
text-align: center;
60+
position: fixed;
61+
height: auto;
62+
bottom: 0;
63+
width: 100%;
64+
}
65+
66+
.main .top-row {
67+
background-color: #f7f7f7;
68+
border-bottom: 1px solid #d6d5d5;
69+
justify-content: flex-start;
70+
}
71+
72+
.main .top-row > a, .main .top-row .btn-link {
73+
white-space: nowrap;
74+
margin-left: 1.5rem;
75+
}
76+
77+
.main .top-row a:first-child {
78+
overflow: hidden;
79+
text-overflow: ellipsis;
80+
}
81+
82+
.sidebar {
83+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
84+
padding: 0;
85+
margin: 0;
86+
}
87+
88+
.sidebar .top-row {
89+
background-color: rgba(0,0,0,0.4);
90+
color: white;
91+
font-size: 1.0rem;
92+
text-align: right;
93+
height: 3.5rem;
94+
justify-content: center;
95+
padding: 3px 0 0 0;
96+
}
97+
98+
.sidebar .navbar-brand {
99+
font-size: 1.0rem;
100+
text-align: right;
101+
color: white;
102+
vertical-align: top;
103+
}
104+
105+
.sidebar .nav-item {
106+
font-size: 0.9rem;
107+
padding-bottom: 0.5rem;
108+
}
109+
110+
.sidebar .nav-item a {
111+
color: #d7d7d7;
112+
height: 3rem;
113+
align-items: center;
114+
line-height: 1rem;
115+
}
116+
117+
.sidebar .nav-item a.active {
118+
background-color: rgba(255,255,255,0.25);
119+
color: white;
120+
}
121+
122+
.sidebar .nav-item a:hover {
123+
background-color: rgba(255,255,255,0.1);
124+
color: white;
125+
}
126+
127+
.content {
128+
padding-top: 1.1rem;
129+
}
130+
131+
.verticalNav {
132+
overflow-y: scroll;
133+
}
134+
135+
.valid.modified:not([type=checkbox]) {
136+
outline: 1px solid #26b050;
137+
}
138+
139+
.invalid {
140+
outline: 1px solid red;
141+
}
27142

28-
.body-content {
29-
padding: 0;
30-
}
143+
.validation-message {
144+
color: red;
31145
}

‎samples/BeforeWebForms/Default.aspx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<li>DetailsView</li>
3434
<li><a href="ControlSamples/FormView">FormView</a></li>
3535
<li><a href="ControlSamples/GridView/Default.aspx">GridView</a></li>
36-
<li><a href="/ControlSamples/ListView">ListView</a></li>
36+
<li><a href="ControlSamples/ListView">ListView</a></li>
3737
<li><a href="ControlSamples/Repeater/Default.aspx">Repeater</a></li>
3838
</ul>
3939
</div>

‎samples/BeforeWebForms/Site.Master‎

Lines changed: 107 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -37,33 +37,117 @@
3737
</Scripts>
3838
</asp:ScriptManager>
3939

40-
<div class="navbar navbar-inverse navbar-fixed-top">
41-
<div class="container">
42-
<div class="navbar-header">
43-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
44-
<span class="icon-bar"></span>
45-
<span class="icon-bar"></span>
46-
<span class="icon-bar"></span>
47-
</button>
48-
<a class="navbar-brand" runat="server" href="~/">Application name</a>
40+
<div class="container">
41+
<div class="row">
42+
<div class="col-lg-2 sidebar">
43+
<div class="top-row">
44+
BlazorWebFormsComponents<br />
45+
BeforeWebForms Sample
46+
</div>
47+
48+
<div class="verticalNav nav navbar">
49+
<asp:TreeView ID="SampleTreeView"
50+
ShowExpandCollapse="true"
51+
ShowLines="false"
52+
Font-Bold="true"
53+
CssClass="nav-item"
54+
runat="server">
55+
56+
<Nodes>
57+
<asp:TreeNode Text=" Home" NavigateUrl="/">
58+
<asp:TreeNode Text=" Data Components" Expanded="true">
59+
60+
<asp:TreeNode Text=" DataList" Expanded="true">
61+
<asp:TreeNode NavigateUrl="ControlSamples/DataList/Default.aspx" Text=" Simple Table" />
62+
<asp:TreeNode NavigateUrl="ControlSamples/DataList/FlowLayout.aspx" Text=" Simple Flow Layout" />
63+
<asp:TreeNode NavigateUrl="ControlSamples/DataList/StyleAttributes.aspx" Text=" Style Attributes" />
64+
<asp:TreeNode Text=" Footer Style" />
65+
<asp:TreeNode Text=" Complex Style" />
66+
<asp:TreeNode NavigateUrl="ControlSamples/DataList/RepeatColumns.aspx" Text=" Repeat Columns" />
67+
</asp:TreeNode>
68+
69+
<asp:TreeNode Text=" FormView" Expanded="true">
70+
<asp:TreeNode NavigateUrl="ControlSamples/FormView/Default.aspx" Text=" Simple Readonly Form" />
71+
<asp:TreeNode Text=" Edit Form" />
72+
</asp:TreeNode>
73+
74+
<asp:TreeNode Text=" GridView" Expanded="true">
75+
<asp:TreeNode NavigateUrl="ControlSamples/GridView/Default.aspx" Text=" Simple GridView" />
76+
<asp:TreeNode NavigateUrl="ControlSamples/GridView/AutoGeneratedColumns.aspx" Text=" Autogenerated Columns" />
77+
<asp:TreeNode NavigateUrl="ControlSamples/GridView/TemplateFields.aspx" Text=" Template Fields" />
78+
<asp:TreeNode Text=" BindAttribute" />
79+
</asp:TreeNode>
80+
81+
<asp:TreeNode Text=" ListView" Expanded="true">
82+
<asp:TreeNode NavigateUrl="ControlSamples/ListView/Default.aspx" Text=" Simple List View" />
83+
<asp:TreeNode NavigateUrl="ControlSamples/ListView/ModelBinding.aspx" Text=" ModelBinding Sample" />
84+
<asp:TreeNode NavigateUrl="ControlSamples/ListView/Grouping.aspx" Text=" Grouping Sample" />
85+
<asp:TreeNode Text=" Layout Test" />
86+
</asp:TreeNode>
87+
88+
<asp:TreeNode NavigateUrl="ControlSamples/Repeater/Default.aspx" Text=" Repeater" Expanded="true" />
89+
</asp:TreeNode>
90+
91+
<asp:TreeNode Text=" Validation Components" Expanded="false">
92+
<asp:TreeNode Text=" Custom Validator" />
93+
<asp:TreeNode Text=" Regular Expression" />
94+
<asp:TreeNode Text=" Required Field" />
95+
<asp:TreeNode Text=" Compare" />
96+
<asp:TreeNode Text=" Range" />
97+
<asp:TreeNode Text=" Validation Summary" />
98+
</asp:TreeNode>
99+
100+
<asp:TreeNode Text=" Navigation Components" Expanded="true">
101+
<asp:TreeNode Text=" Menu" />
102+
<asp:TreeNode Text=" Site Map Path" />
103+
<asp:TreeNode Text=" TreeView" Expanded="true">
104+
<asp:TreeNode Text=" Simple TreeView" NavigateUrl="ControlSamples/TreeView/Default.aspx" />
105+
<asp:TreeNode Text=" Arrows ImageSet" />
106+
<asp:TreeNode Text=" Bullets ImageSet" />
107+
<asp:TreeNode Text=" Bullets No Expand" />
108+
<asp:TreeNode Text=" Images" />
109+
<asp:TreeNode Text=" With Grid Lines" NavigateUrl="ControlSamples/TreeView/WithGridLines.aspx" />
110+
<asp:TreeNode Text=" Static TreeView" />
111+
<asp:TreeNode Text=" SiteMap Data Source" />
112+
<asp:TreeNode Text=" XML Data Source" />
113+
</asp:TreeNode>
114+
</asp:TreeNode>
115+
116+
<asp:TreeNode Text=" Login Components" Expanded="false">
117+
<asp:TreeNode Text=" LoginName" />
118+
<asp:TreeNode Text=" Login" />
119+
120+
<asp:TreeNode Text=" LoginStatus" Expanded="true">
121+
<asp:TreeNode Text=" Authenticated" />
122+
<asp:TreeNode Text=" Not Authenticated" />
123+
</asp:TreeNode>
124+
</asp:TreeNode>
125+
</asp:TreeNode>
126+
</Nodes>
127+
</asp:TreeView>
128+
</div>
49129
</div>
50-
<div class="navbar-collapse collapse">
51-
<ul class="nav navbar-nav">
52-
<li><a runat="server" href="~/">Home</a></li>
53-
<li><a runat="server" href="~/About">About</a></li>
54-
<li><a runat="server" href="~/Contact">Contact</a></li>
55-
</ul>
130+
131+
<div class="col-lg-10">
132+
<div class="main">
133+
<div class="top-row">
134+
<a target="_blank" href="https://fritzandfriends.github.io/BlazorWebFormsComponents/">BlazorWebFormsComponents Reference Documentation</a>
135+
<a target="_blank" href="https://github.com/FritzAndFriends/BlazorWebFormsComponents">About BlazorWebFormsComponents</a>
136+
</div>
137+
138+
<div class="content">
139+
<asp:ContentPlaceHolder ID="MainContent" runat="server">
140+
</asp:ContentPlaceHolder>
141+
</div>
142+
</div>
56143
</div>
57144
</div>
58145
</div>
59-
<div class="container body-content">
60-
<asp:ContentPlaceHolder ID="MainContent" runat="server">
61-
</asp:ContentPlaceHolder>
62-
<hr />
63-
<footer>
64-
<p>&copy; <%: DateTime.Now.Year %> - BeforeWebForms Sample</p>
65-
</footer>
66-
</div>
146+
<hr />
147+
<footer>
148+
<p>&copy; <%: DateTime.Now.Year %> - BeforeWebForms Sample</p>
149+
This site was built with ♥♥ and <a href="https://dot.net">Open Source C#</a>, <a href="https://www.asp.net">ASP.NET 3.1</a>, and the <a target="_blank" href="https://github.com/FritzAndFriends/BlazorWebFormsComponents/">BlazorWebFormsComponents</a>
150+
</footer>
67151
</form>
68152
</body>
69153
</html>

‎samples/BeforeWebForms/Site.Master.designer.cs‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)