Merge branch 'lars-algemeen' into 'master'

Lars algemeen

See merge request !26
This commit was merged in pull request #30.
This commit is contained in:
Marijn Jansen
2017-01-12 15:02:51 +01:00
8 changed files with 112 additions and 27 deletions

View File

@@ -19,9 +19,7 @@
} }
.chat-recent, .chat-history { .chat-recent, .chat-history {
border-radius: 20px;
width: 100%; width: 100%;
background-color: white;
} }
/* List of chats. */ /* List of chats. */
@@ -47,7 +45,7 @@
.chat-history { .chat-history {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
padding-bottom: 10px; padding: 0 0 10px 0;
} }
.chat-message { .chat-message {
@@ -80,20 +78,35 @@
/* Chat reply field */ /* Chat reply field */
.chat-field { .chat-field {
padding: 15px; width: 100%;
padding: 15px 0;
display: table;
} }
.chat-field input { .chat-field form {
border-radius: 8px; width: 100%;
overflow: hidden;
}
.chat-field span {
display: block;
overflow: hidden;
} }
.chat-field input[type="text"] { .chat-field input[type="text"] {
width: calc(100% - 80px); width: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }
.chat-field input[type="submit"] { .chat-field input[type="submit"] {
width: auto; width: auto;
float: right;
background-color: #845663; background-color: #845663;
color: white; color: white;
padding: 5px 10px; padding: 5px 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }

View File

@@ -26,16 +26,13 @@ header {
} }
#header-search input[type="text"] { #header-search input[type="text"] {
padding: 5px 10px;
height: 19px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
#header-search input[type="submit"] {
margin: 0 0 0 -4px;
padding: 5px;
#header-search input[type="submit"] {
background: none;
color: white;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }

View File

@@ -43,6 +43,7 @@ body {
.platform { .platform {
padding: 20px; padding: 20px;
margin-bottom: 10px;
border-radius: 10px; border-radius: 10px;
background-color: #FFFFFF; background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@@ -65,11 +66,6 @@ body {
border: 0; border: 0;
} }
input[type="text"] {
padding: 5px;
}
/* Move element down (clear), below floating elements */ /* Move element down (clear), below floating elements */
.clear { .clear {
clear: both; clear: both;
@@ -106,6 +102,10 @@ h5 {
font-size: 1.4em; font-size: 1.4em;
} }
ul {
list-style-type: none;
}
p { p {
font-size: 1.2em; font-size: 1.2em;
} }
@@ -115,6 +115,21 @@ a, a:link, a:visited, a:hover, a:active {
text-decoration: none; text-decoration: none;
} }
button, input, select {
width: auto;
height: 32px;
padding: 0 5px;
background: white;
color: #3333333;
cursor: pointer;
border: none;
font-family: Arial;
font-size: 16px;
}
/* Tables */ /* Tables */
table { table {
border-spacing: 0; border-spacing: 0;

View File

@@ -0,0 +1,3 @@
.search-form input {
border-bottom: #845663 solid 1px;
}

View File

@@ -1,7 +1,7 @@
<div class="content"> <div class="content">
<div class="chat"> <div class="chat">
<div class="chat-left"> <div class="chat-left">
<nav class="chat-recent"> <nav class="chat-recent platform">
<h5>Chats</h5> <h5>Chats</h5>
<a href="#"><div class="chat-conversation"> <a href="#"><div class="chat-conversation">
<img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw"> <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
@@ -15,7 +15,7 @@
</div> </div>
<div class="chat-right"> <div class="chat-right">
<div class="chat-history"> <div class="chat-history platform">
<div class="chat-message"> <div class="chat-message">
<div class="chat-message-self">Hi!</div> <div class="chat-message-self">Hi!</div>
</div> </div>
@@ -43,14 +43,16 @@
</div> </div>
<div class="chat-field"> <div class="chat-field">
<form method="post"> <form method="post">
<input type="submit"
value="Verstuur"
>
<span>
<input type="text" <input type="text"
name="message" name="message"
placeholder="Reageer..." placeholder="Reageer..."
required required
> >
<input type="submit" </span>
value="Verstuur"
>
</form> </form>
</div> </div>
</div> </div>

View File

@@ -13,6 +13,7 @@
@import url("styles/header.css"); @import url("styles/header.css");
@import url("styles/menu.css"); @import url("styles/menu.css");
@import url("styles/footer.css"); @import url("styles/footer.css");
@import url("styles/search.css");
@import url("styles/adminpanel.css"); @import url("styles/adminpanel.css");
@import url("styles/chat.css"); @import url("styles/chat.css");
@import url("styles/settings.css"); @import url("styles/settings.css");

View File

@@ -4,7 +4,7 @@
</div> </div>
<div id="header-search"> <div id="header-search">
<form action="search.php" method="get"> <form action="search.php" method="get">
<input name="search" type="text" placeholder="search people, friends and pages" /> <input name="search" type="text" placeholder="zoek naar van alles" />
<input type="submit" value="Zoek"/> <input type="submit" value="Zoek"/>
</form> </form>
</div> </div>

File diff suppressed because one or more lines are too long