Skip to content

Commit 9dadd33

Browse files
Gourav DwivediGourav Dwivedi
Gourav Dwivedi
authored and
Gourav Dwivedi
committed
added new layout using material design
1 parent 8363685 commit 9dadd33

File tree

7 files changed

+114
-36
lines changed

7 files changed

+114
-36
lines changed

‎src/Index.html‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,77 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title >SignalR Web Client</title>
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
89
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
10+
911
<link rel="icon" href="data:,">
1012
</head>
1113
<body>
12-
<div class="container">
14+
<!-- <div class="container">
1315
<h1>SignalR Web Client</h1>
1416
<src-app></src-app>
15-
</div>
16-
<!-- <script src="./main.js"></script> -->
17+
</div> -->
18+
<div class="mdl-layout mdl-layout--fixed-header">
19+
<header class="mdl-layout__header mdl-layout__header--scroll">
20+
21+
<div class="mdl-layout__header-row">
22+
<!-- Left aligned menu below button -->
23+
<!-- <div class="menu-list">
24+
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
25+
<i class="material-icons">more_vert</i>
26+
</button>
27+
28+
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
29+
<li class="mdl-menu__item">
30+
<a target="_blank" href="https://github.com/gourav-d/SignalR-Web-Client">Github</a>
31+
</li>
32+
</ul>
33+
</div> -->
34+
35+
<span class="mdl-layout-title">SignalR Web Client</span>
36+
37+
<!-- Right aligned menu below button -->
38+
<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">
39+
<i class="material-icons">more_vert</i>
40+
</button>
41+
42+
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
43+
for="demo-menu-lower-right">
44+
<li class="mdl-menu__item">
45+
<a target="_blank" href="https://github.com/gourav-d/SignalR-Web-Client">Github</a>
46+
</li>
47+
</ul>
48+
49+
<!-- Add spacer, to align navigation to the right -->
50+
<!-- <div class="mdl-layout-spacer"></div> -->
51+
<!-- Navigation -->
52+
<!-- <nav class="mdl-navigation">
53+
<a class="mdl-navigation__link" href="">Link</a>
54+
<a class="mdl-navigation__link" href="">Link</a>
55+
<a class="mdl-navigation__link" href="">Link</a>
56+
<a class="mdl-navigation__link" href="">Link</a>
57+
</nav>
58+
</div>-->
59+
60+
</header>
61+
<!--<div class="mdl-layout__drawer">
62+
<span class="mdl-layout-title">SignalR Web1 Client</span> -->
63+
<!-- <nav class="mdl-navigation">
64+
<a class="mdl-navigation__link" target="_blank" href="https://github.com/gourav-d/SignalR-Web-Client">Github</a>
65+
<a class="mdl-navigation__link" href="">Link</a>
66+
<a class="mdl-navigation__link" href="">Link</a>
67+
<a class="mdl-navigation__link" href="">Link</a>
68+
</nav> </div> -->
69+
70+
<!-- </header> -->
71+
<main class="mdl-layout__content">
72+
<div class="page-content">
73+
<div class="container">
74+
<br/><br/>
75+
<src-app></src-app>
76+
</div>
77+
</div>
78+
</main>
79+
</div>
1780
</body>
1881
</html>

‎src/css/main.css‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ h1 {
55
}
66

77
body {
8-
padding : 10px ;
9-
8+
padding : 0px ;
9+
margin: 0px;
10+
font-family: 'Roboto', 'Helvetica', sans-serif;
1011
}
1112

1213
.tab {
@@ -15,8 +16,10 @@ body {
1516

1617
/* .tabcontent .tab-pane{ border:solid 1px blue; border-top: 0}; */
1718
#tabheader li a {
18-
background-color: rgb(17, 106, 158);
19-
color: white;
19+
/* background-color: rgb(17, 106, 158); */
20+
background-color: rgb(63,81,181);
21+
/* color: white; */
22+
color: rgb(255,255,255);
2023
font-size: 20px;
2124
}
2225

@@ -36,13 +39,14 @@ body {
3639
padding-right: 1px;
3740
padding-bottom: 1px;
3841
/* padding: 10px, 10px,10px, 10px; */
39-
background-color: rgb(17, 106, 158);
42+
/* background-color: rgb(17, 106, 158); */
43+
background-color: rgb(63,81,181);
4044
border: 1px;
4145

4246
}
4347

4448
li:hover {
45-
background-color: white;
49+
background-color: rgb(63,81,181);
4650
}
4751

4852
/* #tab-header .nav-pills > li > a {
@@ -95,7 +99,8 @@ li:hover {
9599
}
96100

97101
ul.nav .nav-item a:hover {
98-
border-color: rgb(17, 106, 158) !important;
102+
/* border-color: rgb(17, 106, 158) !important; */
103+
border-color: rgb(63,81,181) !important;
99104
}
100105
ul.nav .nav-link.active:hover {
101106
border-color: white !important;
@@ -117,6 +122,22 @@ ul.nav .nav-link.active:hover {
117122
word-wrap: break-word;/*Used because long log messages going out of div.*/
118123
}
119124

125+
/* Align span text in center of the div */
126+
.mdl-layout-title {
127+
display:table;
128+
margin:0 auto;
129+
}
130+
131+
/* .mdl-layout__header-row {
132+
padding: 0px 0px 0px 80px;
133+
margin: 0 0 0 0;
134+
}
135+
136+
#demo-menu-lower-left {
137+
padding: 0;
138+
margin: 0;
139+
} */
140+
120141
.scale-in-ver-top {
121142
-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
122143
animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

‎src/js/components/app.component.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@ class AppComponent extends HTMLElement {
44
}
55

66
connectedCallback() {
7-
console.log('connected!');
87
this.render();
98
}
109

1110
disconnectedCallback() {
12-
console.log('disconnected!');
1311
}
1412

1513
attributeChangedCallback(attrName, oldVal, newVal) {

‎src/js/components/dialogbox/custompopup.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import './custompopupStyle.css';
22

33
;(function (window){
4-
5-
debugger;
64
if(document.getElementById('dialogoverlay'))
75
return;
86

‎src/js/components/srform.component.js‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,24 @@ class SrFormComponent extends HTMLElement {
3232
3333
<form>
3434
<fieldset>
35-
<div class="form">
36-
37-
</div>
3835
3936
<div class="form-group row">
4037
<label for="inputUrl" class="col-sm-2 col-form-label">Hub Address</label>
4138
<div class="col-sm-8">
4239
<input type="text" class="form-control inputUrl" id="inputUrl" placeholder="Url" value="https://localhost:5001/Test/Hub">
4340
</div>
4441
45-
<div class="col-sm-2 checkbox-container float-right" id="logger-chk-container">
46-
<label class="col-sm-2 col-form-label mdl-switch mdl-js-switch mdl-js-ripple-effect" for="chk-loggerView">
47-
<input type="checkbox" id="chk-loggerView" class="mdl-switch__input col-sm-2 col-form-label" value="Logger View">
42+
<div class="col-sm-1 checkbox-container float-left" id="logger-chk-container">
43+
<label class="col-sm-1 col-form-label mdl-switch mdl-js-switch mdl-js-ripple-effect" for="chk-loggerView">
44+
<input type="checkbox" id="chk-loggerView" class="col-sm-1 col-form-label mdl-switch__input" value="Logger View">
4845
<span class="mdl-switch__label"></span>
4946
</label>
50-
<div class="mdl-tooltip mdl-tooltip--large" for="logger-chk-container">Logging</div>
47+
<div class="mdl-tooltip" for="logger-chk-container">Logging</div>
5148
</div>
5249
</div>
5350
5451
55-
<div class="form-group row onconnect" id="auth-container">
52+
<div class="form-group row onconnect scale-in-ver-top" id="auth-container">
5653
<label for="authHeader" class="col-sm-2 col-form-label">Authentication Header</label>
5754
<div class="col-sm-10 offset-sm-2">
5855
<input type="text" class="form-control" id="authHeader" placeholder="Token" disabled/>
@@ -67,7 +64,7 @@ class SrFormComponent extends HTMLElement {
6764
</div>
6865
</div>
6966
70-
<div class="form-group row onconnect" ${divStyle} id="protocol-support">
67+
<div class="form-group row onconnect scale-in-ver-top" ${divStyle} id="protocol-support">
7168
<label class="col-sm-2 col-form-label">Transport Type</label>
7269
<div class="col-sm-10 offset-sm-2">
7370
<div class="form-check form-check-inline">
@@ -103,41 +100,41 @@ class SrFormComponent extends HTMLElement {
103100
</div>
104101
</div>
105102
106-
<div class="form-group row">
103+
<div class="form-group row scale-in-ver-top">
107104
<div class="col-sm-10 offset-sm-2">
108-
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent connectbtn" id="btn-connect" value="Connect" />
105+
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary connectbtn" id="btn-connect" value="Connect" />
109106
</div>
110107
</div>
111108
112-
<div class="form-group row onconnect">
109+
<div class="form-group row onconnect scale-in-ver-top">
113110
<label for="inputServerMethod" class="col-sm-2 col-form-label">Server Method</label>
114111
<div class="col-sm-10 offset-sm-2">
115112
<input type="text" class="form-control" id="inputServerMethod" placeholder="Server Method Name">
116113
</div>
117114
</div>
118-
<div class="form-group row onconnect">
115+
<div class="form-group row onconnect scale-in-ver-top">
119116
<label for="inputRequestData" class="col-sm-2 col-form-label">Request Payload</label>
120117
<div class="col-sm-10 offset-sm-2">
121-
<input type="button" value="Add Argument" id="inputRequestData" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent btn-add-argument" />
118+
<input type="button" value="Add Argument" id="inputRequestData" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary btn-add-argument" />
122119
<div id="method-arguments" class="form-group method-arguments"></div>
123120
</div>
124121
</div>
125-
<div class="form-group row onconnect">
122+
<div class="form-group row onconnect scale-in-ver-top">
126123
<label for="inputResponseData" class="col-sm-2 col-form-label">Response Payload</label>
127124
<div class="col-sm-10 offset-sm-2">
128125
<textarea rows="2" class="form-control" id="inputResponseData" placeholder="Response Payload"></textarea>
129126
</div>
130127
</div>
131-
<div class="form-group row onconnect ">
128+
<div class="form-group row onconnect scale-in-ver-top">
132129
<div class="col-sm-4 offset-sm-2 btn-group">
133-
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent btn-send-payload" id="btn-send-payload" value="Send"/>
134-
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent disconnectbtn" id="btn-disconnectbtn" value="Disconnect" />
130+
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary btn-send-payload" id="btn-send-payload" value="Send"/>
131+
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary disconnectbtn" id="btn-disconnectbtn" value="Disconnect" />
135132
</div>
136133
</div>
137134
<div class="form-group row logger-container scale-in-ver-top" style="display:none" id="logger-container">
138135
<fieldset class="bg-gray" id="loggerView">
139136
<div class="text-right">
140-
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent " id="btn-clearlogs" value="Clear" />
137+
<input type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary " id="btn-clearlogs" value="Clear" />
141138
<br/>
142139
</div>
143140
<legend class="col-form-label">

‎src/js/components/srform.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export function AddArgumentsCallBack() {
158158
for (var i = 0; i < parentDiv.length; i++) {
159159

160160
var divElement = document.createElement('div');
161-
divElement.setAttribute('class', 'container args-container');
161+
divElement.setAttribute('class', 'container args-container scale-in-ver-top');
162162

163163
var hr = document.createElement('hr');
164164
hr.setAttribute('class', 'style13');

‎src/js/main.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
2+
import 'material-design-lite/material.css'
3+
import 'material-design-lite/material.js'
14
import '@webcomponents/webcomponentsjs/webcomponents-bundle';//WebComponent Pollyfill
25
import 'bootstrap/dist/css/bootstrap.css'
3-
import 'material-design-lite/dist/material.indigo-blue.min.css'
4-
import 'material-design-lite/material.min.js'
56
import 'bootstrap/dist/js/bootstrap.js'
67
import '../css/main.css';
78
// import './components/custom.alertbox';

0 commit comments

Comments
 (0)