New layout/design
Two column layout and style tweaks. Templatized conversation views. Generalized list view.
This commit is contained in:
parent
6d5e32bca8
commit
def32f42d4
9 changed files with 203 additions and 91 deletions
|
@ -3,14 +3,19 @@
|
|||
position: relative;
|
||||
min-height: 64px;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #acdbf5;
|
||||
padding: 0.5em;
|
||||
background-color: #7fd0ed;
|
||||
color: #fff;
|
||||
margin-bottom: 0.5em;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-name: convoopen;
|
||||
clear: both;
|
||||
}
|
||||
li.conversation {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.conversation .name {
|
||||
padding: 1em 0 1em 3em;
|
||||
}
|
||||
|
||||
.conversation.closed {
|
||||
|
@ -54,9 +59,7 @@
|
|||
float: right;
|
||||
}
|
||||
.conversation .image {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
border: 2px solid #acdbf5;
|
||||
|
|
|
@ -19,11 +19,75 @@
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 400px;
|
||||
min-height: 500px;
|
||||
font-family: sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
/* layout 2 col full height */
|
||||
html {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0; /* This removes the border around the viewport in old versions of IE */
|
||||
width:100%;
|
||||
height: 100%;
|
||||
min-width:400px; /* Minimum width of layout - remove line if not required */
|
||||
/* The min-width property does not work in old versions of Internet Explorer */
|
||||
}
|
||||
/* column container */
|
||||
.colmask {
|
||||
position:relative; /* This fixes the IE7 overflow hidden bug */
|
||||
clear:both;
|
||||
float:left;
|
||||
width:100%; /* width of whole page */
|
||||
height: 100%;
|
||||
overflow:hidden; /* This chops off any overhanging divs */
|
||||
}
|
||||
/* common column settings */
|
||||
.colleft {
|
||||
float:left;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
position:relative;
|
||||
border-right: 2px solid #acdbf5;
|
||||
}
|
||||
.col1,
|
||||
.col2 {
|
||||
float:left;
|
||||
position:relative;
|
||||
padding:0 0 1em 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
/* 2 Column (left menu) settings */
|
||||
.leftmenu .colleft {
|
||||
right:72%; /* right column width */
|
||||
background:#f4f4f4; /* left column background colour */
|
||||
}
|
||||
.leftmenu .col1 {
|
||||
width:72%; /* right column content width */
|
||||
left:100%; /* 100% plus left column left padding */
|
||||
}
|
||||
.leftmenu .col2 {
|
||||
width:28%; /* left column content width (column width minus left and right padding) */
|
||||
}
|
||||
/* end layout */
|
||||
|
||||
/*
|
||||
#sidebar {
|
||||
float: left;
|
||||
width: 30%;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin-left: 35%;
|
||||
padding: 1em;
|
||||
border-left: 2px solid #acdbf5;
|
||||
}
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
|
@ -33,6 +97,7 @@ body {
|
|||
|
||||
header {
|
||||
padding: 5px 0;
|
||||
background-color: #7fd0ed;
|
||||
}
|
||||
|
||||
label {
|
||||
|
@ -40,6 +105,7 @@ label {
|
|||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#compose-create,
|
||||
#compose-cancel {
|
||||
float: right;
|
||||
}
|
||||
|
@ -48,11 +114,12 @@ label {
|
|||
padding: 0.3em 1em;
|
||||
}
|
||||
|
||||
#popup_send_numbers {
|
||||
margin-bottom: 0;
|
||||
#send_numbers {
|
||||
max-width: 70%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#popup_send_numbers:focus + .contacts,
|
||||
#send_numbers:focus + .contacts,
|
||||
.contacts:hover {
|
||||
display: block;
|
||||
z-index: 10;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue