make the addon frio_hovercard working with the frio theme (Note: some changes which belong to the addon itself are going to the frio theme repository, because it's not planned to use the frio_hovercard addon without the frio theme and and vice versa.
The addon frio_hovercard was initatet because we need a new module for the frio theme
This commit is contained in:
rabuzarus
parent
462a942df2
commit
adefc315f7
7 changed files with 943 additions and 75 deletions
646
css/hovercard.css
Normal file
646
css/hovercard.css
Normal file
|
|
@ -0,0 +1,646 @@
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
font-size: 10px;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: "Lato", Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.42857143;
|
||||||
|
color: #333333;
|
||||||
|
background-color: #e9ecf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #587c9b;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
color: #3c556a;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
a:focus {
|
||||||
|
outline: thin dotted;
|
||||||
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
.main-container {
|
||||||
|
min-height: 100%;
|
||||||
|
padding-bottom: 2em;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.hovercard {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1040;
|
||||||
|
display: none;
|
||||||
|
/*max-width: 276px;*/
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 1px;
|
||||||
|
text-align: left;
|
||||||
|
background-color: #ffffff;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 200px;
|
||||||
|
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.hovercard.top {
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
.hovercard.right {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.hovercard.bottom {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.hovercard.left {
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
.hovercard-title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 18px;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
border-radius: 199px 199px 0 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.hovercard-content {
|
||||||
|
/* padding: 9px 14px;*/
|
||||||
|
|
||||||
|
color: #777;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.hovercard > .arrow,
|
||||||
|
.hovercard > .arrow:after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
.hovercard > .arrow {
|
||||||
|
border-width: 11px;
|
||||||
|
}
|
||||||
|
.hovercard > .arrow:after {
|
||||||
|
border-width: 10px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.hovercard.top > .arrow {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -11px;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-top-color: #999999;
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.25);
|
||||||
|
bottom: -11px;
|
||||||
|
}
|
||||||
|
.hovercard.top > .arrow:after {
|
||||||
|
content: " ";
|
||||||
|
bottom: 1px;
|
||||||
|
margin-left: -10px;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-top-color: #ffffff;
|
||||||
|
}
|
||||||
|
.hovercard.right > .arrow {
|
||||||
|
top: 50%;
|
||||||
|
left: -11px;
|
||||||
|
margin-top: -11px;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-right-color: #999999;
|
||||||
|
border-right-color: rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.hovercard.right > .arrow:after {
|
||||||
|
content: " ";
|
||||||
|
left: 1px;
|
||||||
|
bottom: -10px;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-right-color: #ffffff;
|
||||||
|
}
|
||||||
|
.hovercard.bottom > .arrow {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -11px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #999999;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.25);
|
||||||
|
top: -11px;
|
||||||
|
}
|
||||||
|
.hovercard.bottom > .arrow:after {
|
||||||
|
content: " ";
|
||||||
|
top: 1px;
|
||||||
|
margin-left: -10px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #ffffff;
|
||||||
|
}
|
||||||
|
.hovercard.left > .arrow {
|
||||||
|
top: 50%;
|
||||||
|
right: -11px;
|
||||||
|
margin-top: -11px;
|
||||||
|
border-right-width: 0;
|
||||||
|
border-left-color: #999999;
|
||||||
|
border-left-color: rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.hovercard.left > .arrow:after {
|
||||||
|
content: " ";
|
||||||
|
right: 1px;
|
||||||
|
border-right-width: 0;
|
||||||
|
border-left-color: #ffffff;
|
||||||
|
bottom: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-aligned {
|
||||||
|
float: right !important;
|
||||||
|
}
|
||||||
|
.left-align {
|
||||||
|
float: left !important;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
.h1,
|
||||||
|
h2,
|
||||||
|
.h2,
|
||||||
|
h3,
|
||||||
|
.h3 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
h4,
|
||||||
|
.h4,
|
||||||
|
h5,
|
||||||
|
.h5,
|
||||||
|
h6,
|
||||||
|
.h6 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
h4.text-center {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
sup {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
small,
|
||||||
|
.small {
|
||||||
|
font-size: 85%;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
a:hover,
|
||||||
|
a:active,
|
||||||
|
a:focus,
|
||||||
|
a:visited {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Basic hovercard */
|
||||||
|
.basic-content {
|
||||||
|
padding: 9px 14px;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper {
|
||||||
|
background: #fff;
|
||||||
|
border: 2px #fff solid;
|
||||||
|
margin-top:10px;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper > a,
|
||||||
|
.basic-image-wrapper > span {
|
||||||
|
background-size: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.basic-image-wrapper:hover {
|
||||||
|
box-shadow: 0 0 0.2em #7595b1;
|
||||||
|
cursor: pointer;
|
||||||
|
}*/
|
||||||
|
.basic-image-wrapper.mini {
|
||||||
|
max-width: 40px;
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.mini > a,
|
||||||
|
.basic-image-wrapper.mini > span {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.mini .image-l {
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: -14px;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.mini .image-l > span {
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-size: 100% !important;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.mini > .image-ur,
|
||||||
|
.basic-image-wrapper.mini > .image-lr {
|
||||||
|
width: 19px;
|
||||||
|
display: block;
|
||||||
|
height: 23px;
|
||||||
|
margin-top: -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: right;
|
||||||
|
text-align: center;
|
||||||
|
z-index: -99;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.mini > .image-ur > span,
|
||||||
|
.basic-image-wrapper.mini > .image-lr > span {
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-size: 100% !important;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.normal {
|
||||||
|
max-width: 60px;
|
||||||
|
max-height: 60px;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.normal > a,
|
||||||
|
.basic-image-wrapper.normal > span {
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.medium {
|
||||||
|
max-width: 70px;
|
||||||
|
max-height: 70px;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.medium > a,
|
||||||
|
.basic-image-wrapper.medium > span {
|
||||||
|
height: 70px;
|
||||||
|
width: 70px;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.large {
|
||||||
|
max-width: 140px;
|
||||||
|
max-height: 140px;
|
||||||
|
}
|
||||||
|
.basic-image-wrapper.large > a,
|
||||||
|
.basic-image-wrapper.large > span {
|
||||||
|
height: 140px;
|
||||||
|
width: 140px;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Google like */
|
||||||
|
.image-wrapper {
|
||||||
|
background: #fff;
|
||||||
|
border: 2px #fff solid;
|
||||||
|
/* -webkit-border-radius: 200px;
|
||||||
|
-moz-border-radius: 200px;
|
||||||
|
border-radius: 200px;*/
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.image-wrapper > a,
|
||||||
|
.image-wrapper > span {
|
||||||
|
background-size: 100% !important;
|
||||||
|
}
|
||||||
|
/*.image-wrapper:hover {
|
||||||
|
box-shadow: 0 0 0.2em #7595b1;
|
||||||
|
cursor: pointer;
|
||||||
|
}*/
|
||||||
|
.image-wrapper.mini {
|
||||||
|
max-width: 40px;
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
.image-wrapper.mini > a,
|
||||||
|
.image-wrapper.mini > span {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.image-wrapper.mini .image-l {
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: -14px;
|
||||||
|
}
|
||||||
|
.image-wrapper.mini .image-l > span {
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-size: 100% !important;
|
||||||
|
}
|
||||||
|
.image-wrapper.mini > .image-ur,
|
||||||
|
.image-wrapper.mini > .image-lr {
|
||||||
|
width: 19px;
|
||||||
|
display: block;
|
||||||
|
height: 23px;
|
||||||
|
margin-top: -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: right;
|
||||||
|
text-align: center;
|
||||||
|
z-index: -99;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
.image-wrapper.mini > .image-ur > span,
|
||||||
|
.image-wrapper.mini > .image-lr > span {
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-size: 100% !important;
|
||||||
|
}
|
||||||
|
.image-wrapper.normal {
|
||||||
|
max-width: 60px;
|
||||||
|
max-height: 60px;
|
||||||
|
}
|
||||||
|
.image-wrapper.normal > a,
|
||||||
|
.image-wrapper.normal > span {
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.image-wrapper.medium {
|
||||||
|
/* max-width: 80px;
|
||||||
|
max-height: 80px;*/
|
||||||
|
}
|
||||||
|
.image-wrapper.medium > a,
|
||||||
|
.image-wrapper.medium > span {
|
||||||
|
/* height: 80px;
|
||||||
|
width: 80px;*/
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.image-wrapper.medium > a img {
|
||||||
|
height: 80px;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
.image-wrapper.large {
|
||||||
|
max-width: 140px;
|
||||||
|
max-height: 140px;
|
||||||
|
}
|
||||||
|
.image-wrapper.large > a,
|
||||||
|
.image-wrapper.large > span {
|
||||||
|
height: 140px;
|
||||||
|
width: 140px;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.main-body {
|
||||||
|
background: #fff;
|
||||||
|
padding: 1.25em 2em;
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
line-height: 1.75em;
|
||||||
|
}
|
||||||
|
.hovercard {
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
/*max-width: 250px;*/
|
||||||
|
max-width: 400px;
|
||||||
|
width: 400px;
|
||||||
|
-webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
|
||||||
|
-moz-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
|
||||||
|
box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
.hovercard a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.hovercard.right > .arrow {
|
||||||
|
border-right-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.hovercard.left > .arrow {
|
||||||
|
border-left-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.hovercard.bottom > .arrow {
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.hovercard.top > .arrow {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.advance-hovercard + .hovercard {
|
||||||
|
max-width: 445px;
|
||||||
|
}
|
||||||
|
.advance-hovercard + .hovercard .hovercard-content {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-hovercard + .hovercard {
|
||||||
|
max-width: 445px;
|
||||||
|
}
|
||||||
|
.basic-hovercard + .hovercard .hovercard-content {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-card-header {
|
||||||
|
width: 100%;
|
||||||
|
/*height: 60px;*/
|
||||||
|
}
|
||||||
|
.hover-card-header h4 {
|
||||||
|
/*float: left;*/
|
||||||
|
display: block;
|
||||||
|
width: 310px;
|
||||||
|
/*margin-top: 25px;*/
|
||||||
|
/*clear: right;*/
|
||||||
|
}
|
||||||
|
.hover-card-header h4 a {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 0.03rem;
|
||||||
|
}
|
||||||
|
.hover-card-header .member-title {
|
||||||
|
display: block;
|
||||||
|
color: #888;
|
||||||
|
line-height: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.hover-card-details {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.hover-card-pic {
|
||||||
|
margin-top: 0px;
|
||||||
|
/*width: 95px;*/
|
||||||
|
display: block;
|
||||||
|
/*height: 90px;*/
|
||||||
|
}
|
||||||
|
.hover-card-pic .image-wrapper {
|
||||||
|
/*margin: 0.5em 0.75em;*/
|
||||||
|
margin-right: 0.75em;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.hover-card-content {
|
||||||
|
list-style-type: none;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0.3em 0 1em;
|
||||||
|
}
|
||||||
|
.hover-card-content .profile-details {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.hover-card-content li.right-aligned {
|
||||||
|
padding: .15em 1.25em;
|
||||||
|
border-left: 1px #F3F2F2 solid;
|
||||||
|
}
|
||||||
|
.hover-card-content li.right-aligned .content {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.hover-card-content li.right-aligned:last-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
.hover-card-content .reputation-bar {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.hover-card-content .reputation-bar span {
|
||||||
|
width: 65px;
|
||||||
|
position: absolute;
|
||||||
|
margin: 1em auto;
|
||||||
|
margin-left: 15px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2em;
|
||||||
|
padding: .15em 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.hover-card-content .desc,
|
||||||
|
.profile-label {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
padding-top: .15em;
|
||||||
|
opacity: 0.8;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.hover-card-actions {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.hover-card-actions-connection {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.hover-card-options-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 430px;
|
||||||
|
float: left;
|
||||||
|
background: #F5F5F5;
|
||||||
|
padding: 0 .5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
clear: both;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.hover-card-options-wrapper ul {
|
||||||
|
padding: .65em 0;
|
||||||
|
}
|
||||||
|
.hover-card-options-wrapper li {
|
||||||
|
list-style-type: none;
|
||||||
|
line-height: 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 .75em;
|
||||||
|
}
|
||||||
|
.hover-card-options-wrapper li i {
|
||||||
|
padding: 5px 3px;
|
||||||
|
-webkit-border-radius: 100%;
|
||||||
|
-moz-border-radius: 100%;
|
||||||
|
border-radius: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.hover-card-options-wrapper li a {
|
||||||
|
color: #444;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.hover-card-options {
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
.hover-card-options .dropdown-menu a {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
.hover-card-footer {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border-top: 1px solid #ebebeb;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.col-sm-10 label {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.demo-content {
|
||||||
|
width: 100%;
|
||||||
|
background: #dadada;
|
||||||
|
border: solid 3px #ccc;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 38%;
|
||||||
|
float: left;
|
||||||
|
margin-right: 2%;
|
||||||
|
margin: 20px 0 30px;
|
||||||
|
}
|
||||||
|
.demo-live {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
line-height: 1.4em;
|
||||||
|
min-height: 218px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
display: block;
|
||||||
|
-webkit-margin-before: 1em;
|
||||||
|
-webkit-margin-after: 1em;
|
||||||
|
-webkit-margin-start: 0px;
|
||||||
|
-webkit-margin-end: 0px;
|
||||||
|
}
|
||||||
|
|
@ -19,6 +19,7 @@ and open the template in the editor.
|
||||||
@import url("frameworks/justifiedGallery/justifiedGallery.min.css");
|
@import url("frameworks/justifiedGallery/justifiedGallery.min.css");
|
||||||
@import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
|
@import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
|
||||||
@import url("font/open_sans/open-sans.css");
|
@import url("font/open_sans/open-sans.css");
|
||||||
|
@import url("css/hovercard.css");
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
282
js/hovercard.js
Normal file
282
js/hovercard.js
Normal file
|
|
@ -0,0 +1,282 @@
|
||||||
|
/*
|
||||||
|
* The javascript for friendicas hovercard. Bootstraps popover is needed.
|
||||||
|
*
|
||||||
|
* Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im>
|
||||||
|
* qvitter code (https://github.com/hannesmannerheim/qvitter)
|
||||||
|
*
|
||||||
|
* It is licensed under the GNU Affero General Public License <http://www.gnu.org/licenses/>
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
// Elements with the class "userinfo" will get a hover-card.
|
||||||
|
// Note that this elements does need a href attribute which links to
|
||||||
|
// a valid profile url
|
||||||
|
$('.userinfo').on("mouseover", function(e) {
|
||||||
|
var timeNow = new Date().getTime();
|
||||||
|
removeAllhoverCards(e,timeNow);
|
||||||
|
var hoverCardData = false;
|
||||||
|
var hrefAttr = false;
|
||||||
|
var targetElement = $(this);
|
||||||
|
|
||||||
|
// get href-attribute
|
||||||
|
if(targetElement.is('[href]')) {
|
||||||
|
hrefAttr = targetElement.attr('href');
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// no hover card if the element has the no-hover-card class
|
||||||
|
if(targetElement.hasClass('no-hover-card')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// no hovercard for anchor links
|
||||||
|
if(hrefAttr.substring(0,1) == '#') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
targetElement.attr('data-awaiting-hover-card',timeNow);
|
||||||
|
|
||||||
|
// The serach term is the url
|
||||||
|
var term = hrefAttr;
|
||||||
|
// the url to get the contact and template data
|
||||||
|
var url = baseurl + "/frio_hovercard";
|
||||||
|
|
||||||
|
// store the title in an other data attribute beause bootstrap
|
||||||
|
// popover destroys the title.attribute. We can restore it later
|
||||||
|
var title = targetElement.attr("title");
|
||||||
|
targetElement.attr({"data-orig-title": title, title: ""});
|
||||||
|
|
||||||
|
// Timeoute until the hover-card does appear
|
||||||
|
setTimeout(function(){
|
||||||
|
if(targetElement.is(":hover") && parseInt(targetElement.attr('data-awaiting-hover-card'),10) == timeNow) {
|
||||||
|
if($('.hovercard').length == 0) { // no card if there already is one open
|
||||||
|
// get an additional data atribute if the card is active
|
||||||
|
targetElement.attr('data-hover-card-active',timeNow);
|
||||||
|
// get the whole html content of the hover card and
|
||||||
|
// push it to the bootstrap popover
|
||||||
|
getHoverCardContent(term, url, function(data){
|
||||||
|
if(data) {
|
||||||
|
targetElement.popover({
|
||||||
|
html: true,
|
||||||
|
placement: 'auto',
|
||||||
|
trigger: 'manual',
|
||||||
|
template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
|
||||||
|
content: data
|
||||||
|
}).popover('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
}).on("mouseleave", function(e) { // action when mouse leaves the hover-card
|
||||||
|
var timeNow = new Date().getTime();
|
||||||
|
// copy the original title to the title atribute
|
||||||
|
var title = $(this).attr("data-orig-title");
|
||||||
|
$(this).attr({"data-orig-title": "", title: title});
|
||||||
|
removeAllhoverCards(e,timeNow);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// hover cards should be removed very easily, e.g. when any of these events happen
|
||||||
|
$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function(e){
|
||||||
|
var timeNow = new Date().getTime();
|
||||||
|
removeAllhoverCards(e,timeNow);
|
||||||
|
});
|
||||||
|
|
||||||
|
// removes all hover cards
|
||||||
|
function removeAllhoverCards(event,priorTo) {
|
||||||
|
// don't remove hovercards until after 100ms, so user have time to move the cursor to it (which gives it the dont-remove-card class)
|
||||||
|
setTimeout(function(){
|
||||||
|
$.each($('.hovercard'),function(){
|
||||||
|
var title = $(this).attr("data-orig-title");
|
||||||
|
// don't remove card if it was created after removeAllhoverCards() was called
|
||||||
|
if($(this).data('card-created') < priorTo) {
|
||||||
|
// don't remove it if we're hovering it right now!
|
||||||
|
if(!$(this).hasClass('dont-remove-card')) {
|
||||||
|
$('[data-hover-card-active="' + $(this).data('card-created') + '"]').removeAttr('data-hover-card-active');
|
||||||
|
$(this).popover("hide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// if we're hovering a hover card, give it a class, so we don't remove it
|
||||||
|
$('body').on('mouseover','.hovercard', function(e) {
|
||||||
|
$(this).addClass('dont-remove-card');
|
||||||
|
});
|
||||||
|
$('body').on('mouseleave','.hovercard', function(e) {
|
||||||
|
$(this).removeClass('dont-remove-card');
|
||||||
|
$(this).popover("hide");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ajax request to get json contact data
|
||||||
|
function getHoverCardData(term, url, actionOnSuccess) {
|
||||||
|
var postdata = {
|
||||||
|
mode : 'modal',
|
||||||
|
profileurl : term,
|
||||||
|
datatype : 'json',
|
||||||
|
};
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
data: postdata,
|
||||||
|
dataType: "json",
|
||||||
|
success: function(data, textStatus, request){
|
||||||
|
actionOnSuccess(data, url, request);
|
||||||
|
},
|
||||||
|
error: function(data) {
|
||||||
|
actionOnSuccess(false, data, url);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// current time in milliseconds, to send each request to make sure
|
||||||
|
// we 're not getting 304 response
|
||||||
|
function timeNow() {
|
||||||
|
return new Date().getTime();
|
||||||
|
}
|
||||||
|
// Get hover-card template data and the contact-data and transform it with
|
||||||
|
// the help of jSmart. At the end we have full html content of the hovercard
|
||||||
|
function getHoverCardContent(term, url, callback) {
|
||||||
|
// fetch the raw content of the template
|
||||||
|
getHoverCardTemplate(url, function(stpl) {
|
||||||
|
var template = unescape(stpl);
|
||||||
|
|
||||||
|
// get the contact data
|
||||||
|
getHoverCardData (term, url, function(data) {
|
||||||
|
if(typeof template != 'undefined') {
|
||||||
|
// get the hover-card variables
|
||||||
|
var variables = getHoverCardVariables(data);
|
||||||
|
var tpl;
|
||||||
|
|
||||||
|
// use friendicas template delimiters instead of
|
||||||
|
// the original one
|
||||||
|
jSmart.prototype.left_delimiter = '{{';
|
||||||
|
jSmart.prototype.right_delimiter = '}}';
|
||||||
|
|
||||||
|
// create a new jSmart instant with the raw content
|
||||||
|
// of the template
|
||||||
|
var tpl = new jSmart (template);
|
||||||
|
// insert the variables content into the template content
|
||||||
|
var HoverCardContent = tpl.fetch(variables);
|
||||||
|
|
||||||
|
callback(HoverCardContent);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// This is interisting. this pice of code ajax request are done asynchron.
|
||||||
|
// To make it work getHOverCardTemplate() and getHOverCardData have to return it's
|
||||||
|
// data (no succes handler for each of this). I leave it here, because it could be useful.
|
||||||
|
// https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/
|
||||||
|
// $.when(
|
||||||
|
// getHoverCardTemplate(url),
|
||||||
|
// getHoverCardData (term, url )
|
||||||
|
//
|
||||||
|
// ).done(function(template, profile){
|
||||||
|
// if(typeof template != 'undefined') {
|
||||||
|
// var variables = getHoverCardVariables(profile);
|
||||||
|
//
|
||||||
|
// jSmart.prototype.left_delimiter = '{{';
|
||||||
|
// jSmart.prototype.right_delimiter = '}}';
|
||||||
|
// var tpl = new jSmart (template);
|
||||||
|
// var html = tpl.fetch(variables);
|
||||||
|
//
|
||||||
|
// return html;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ajax request to get the raw template content
|
||||||
|
function getHoverCardTemplate (url, callback) {
|
||||||
|
var postdata = {
|
||||||
|
mode: 'modal',
|
||||||
|
datatype: 'tpl'
|
||||||
|
};
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
data: postdata,
|
||||||
|
success: function(data, textStatus) {
|
||||||
|
callback(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// The Variables used for the template
|
||||||
|
function getHoverCardVariables(object) {
|
||||||
|
var profile = {
|
||||||
|
name: object.name,
|
||||||
|
nick: object.nick,
|
||||||
|
addr: object.addr,
|
||||||
|
thumb: object.thumb,
|
||||||
|
url: object.url,
|
||||||
|
location: object.location,
|
||||||
|
gender: object.gender,
|
||||||
|
about: object.about,
|
||||||
|
network: object.network,
|
||||||
|
tags: object.tags,
|
||||||
|
bd: object.bd,
|
||||||
|
account_type: object.account_type,
|
||||||
|
actions: object.actions
|
||||||
|
};
|
||||||
|
|
||||||
|
var variables = { profile: profile};
|
||||||
|
|
||||||
|
return variables;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is the html template for the hover-card
|
||||||
|
// Since we grab the original hovercard.tpl we don't
|
||||||
|
// need it anymore
|
||||||
|
function hovercard_template() {
|
||||||
|
var tempate = '\
|
||||||
|
<div class="basic-content" >\
|
||||||
|
<div class="hover-card-details">\
|
||||||
|
<div class="hover-card-header left-align">\
|
||||||
|
<div class="hover-card-pic left-align">\
|
||||||
|
<span class="image-wrapper medium">\
|
||||||
|
<a href="{{$profile.url}}" title="{{$profile.name}}"><img href="" class="left-align thumbnail" src="{{$profile.thumb}}"></a>\
|
||||||
|
</span>\
|
||||||
|
</div>\
|
||||||
|
<div class="hover-card-content">\
|
||||||
|
<div class="profile-entry-name">\
|
||||||
|
<h4 class="left-align1"><a href="{{$profile.url}}">{{$profile.name}}</a></h4>{{if $profile.account_type}}<span>{{$profile.account_type}}</span>{{/if}}\
|
||||||
|
</div>\
|
||||||
|
<div class="profile-details">\
|
||||||
|
<span class="profile-addr">{{$profile.addr}}</span>\
|
||||||
|
{{if $profile.network}}<span class="profile-network"> ({{$profile.network}})</span>{{/if}}\
|
||||||
|
</div>\
|
||||||
|
{{*{{if $profile.about}}<div class="profile-details profile-about">{{$profile.about}}</div>{{/if}}*}}\
|
||||||
|
\
|
||||||
|
</div>\
|
||||||
|
<div class="hover-card-actions right-aligned">\
|
||||||
|
{{* here are the differnt actions like privat message, poke, delete and so on *}}\
|
||||||
|
{{* @todo we have two different photo menus one for contacts and one for items at the network stream. We currently use the contact photo menu, so the items options are missing We need to move them *}}\
|
||||||
|
<div class="hover-card-actions-social">\
|
||||||
|
{{if $profile.actions.pm}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal("{{$profile.actions.pm.1}}")" title="{{$profile.actions.pm.0}}"><i class="fa fa-envelope" aria-hidden="true"></i></a>{{/if}}\
|
||||||
|
{{if $profile.actions.poke}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal("{{$profile.actions.poke.1}}")" title="{{$profile.actions.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{{/if}}\
|
||||||
|
</div>\
|
||||||
|
<div class="hover-card-actions-connection">\
|
||||||
|
{{if $profile.actions.edit}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.edit.1}}" title="{{$profile.actions.edit.0}}"><i class="fa fa-pencil" aria-hidden="true"></i></a>{{/if}}\
|
||||||
|
{{if $profile.actions.drop}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.drop.1}}" title="{{$profile.actions.drop.0}}"><i class="fa fa-user-times" aria-hidden="true"></i></a>{{/if}}\
|
||||||
|
{{if $profile.actions.follow}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.follow.1}}" title="{{$profile.actions.follow.0}}"><i class="fa fa-user-plus" aria-hidden="true"></i></a>{{/if}}\
|
||||||
|
</div>\
|
||||||
|
</div>\
|
||||||
|
</div>\
|
||||||
|
\
|
||||||
|
<div class="clearfix"></div>\
|
||||||
|
\
|
||||||
|
</div>\
|
||||||
|
</div>\
|
||||||
|
{{if $profile.tags}}<div class="hover-card-footer">{{$profile.tags}}</div>{{/if}}';
|
||||||
|
}
|
||||||
21
js/theme.js
21
js/theme.js
|
|
@ -96,27 +96,6 @@ $(document).ready(function(){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Loading remote bootstrap remote modals
|
|
||||||
// This is uses to load tradional friendica pages into bootstrap modals
|
|
||||||
//
|
|
||||||
// commentent out because we actually don't use it anymore
|
|
||||||
// $('a[rel=modal]').on('click', function(evt) {
|
|
||||||
// evt.preventDefault();
|
|
||||||
// var modal = $('#modal').modal();
|
|
||||||
// modal
|
|
||||||
// .find('#modal-body')
|
|
||||||
// .load($(this).attr("href"), function (responseText, textStatus) {
|
|
||||||
// if ( textStatus === 'success' ||
|
|
||||||
// textStatus === 'notmodified')
|
|
||||||
// {
|
|
||||||
// modal.show();
|
|
||||||
//
|
|
||||||
// //Get first h3 element and use it as title
|
|
||||||
// loadModalTitle();
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
// Add Colorbox for viewing Network page images
|
// Add Colorbox for viewing Network page images
|
||||||
//var cBoxClasses = new Array();
|
//var cBoxClasses = new Array();
|
||||||
$(".wall-item-body a img").each(function(){
|
$(".wall-item-body a img").each(function(){
|
||||||
|
|
|
||||||
|
|
@ -158,9 +158,9 @@ $("nav").bind('nav-update', function(e,data)
|
||||||
<script src="<?=$frio?>/frameworks/justifiedGallery/jquery.justifiedGallery.min.js"></script>
|
<script src="<?=$frio?>/frameworks/justifiedGallery/jquery.justifiedGallery.min.js"></script>
|
||||||
<script src="<?=$frio?>/frameworks/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
|
<script src="<?=$frio?>/frameworks/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
|
||||||
<script src="<?=$frio?>/frameworks/flexMenu/flexmenu.custom.js"></script>
|
<script src="<?=$frio?>/frameworks/flexMenu/flexmenu.custom.js"></script>
|
||||||
<script src="<?=$frio?>/frameworks/jsmart/jsmart.js"></script>
|
<script src="<?=$frio?>/frameworks/jsmart/jsmart.custom.js"></script>
|
||||||
<script src="<?=$frio?>/js/theme.js"></script>
|
<script src="<?=$frio?>/js/theme.js"></script>
|
||||||
<script src="<?=$frio?>/js/acl.js"></script>
|
<script src="<?=$frio?>/js/hovercard.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
|
|
|
||||||
|
|
@ -56,42 +56,26 @@
|
||||||
{{* The avatar picture and the photo-menu *}}
|
{{* The avatar picture and the photo-menu *}}
|
||||||
<div class="dropdown pull-left"><!-- Dropdown -->
|
<div class="dropdown pull-left"><!-- Dropdown -->
|
||||||
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a class="dropdown-toggle" type="button" id="wall-item-photo-menu-{{$item.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a href="{{$item.profile_url}}" class="userinfo" id="wall-item-photo-menu-{{$item.id}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
|
||||||
<div class="contact-photo-overlay">
|
|
||||||
<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu contact-menu-lg contact-menu menu-popup" role="menu" aria-labelledby="wall-item-photo-menu-{{$item.id}}">
|
|
||||||
{{$item.item_photo_menu}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a class="dropdown-toggle" type="button" id="wall-item-photo-menu-{{$item.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a href="{{$item.profile_url}}" class="userinfo" id="wall-item-photo-menu-{{$item.id}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
|
||||||
<div class="contact-photo-overlay">
|
|
||||||
<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu contact-menu-xs contact-menu menu-popup" role="menu" aria-labelledby="wall-item-photo-menu-{{$item.id}}">
|
|
||||||
{{$item.item_photo_menu}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div><!-- ./Dropdown -->
|
</div><!-- ./Dropdown -->
|
||||||
|
|
||||||
|
|
||||||
{{* contact info header*}}
|
{{* contact info header*}}
|
||||||
<div role="heading " class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
<div role="heading " class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
||||||
<h4 class="media-heading"><a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name btn-link {{$item.sparkle}}">{{$item.name}}</span></a>
|
<h4 class="media-heading"><a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name btn-link {{$item.sparkle}}">{{$item.name}}</span></a>
|
||||||
{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}} btn-link" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
|
{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name{{$item.osparkle}} btn-link" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
|
||||||
{{if $item.lock}}<span class="navicon lock fakelink" onClick="lockview(event,{{$item.id}});" title="{{$item.lock}}"> <small><i class="fa fa-lock"></i></small></span>{{/if}}
|
{{if $item.lock}}<span class="navicon lock fakelink" onClick="lockview(event,{{$item.id}});" title="{{$item.lock}}"> <small><i class="fa fa-lock"></i></small></span>{{/if}}
|
||||||
|
|
||||||
<div class="additional-info text-muted">
|
<div class="additional-info text-muted">
|
||||||
|
|
@ -112,7 +96,7 @@
|
||||||
{{* contact info header for smartphones *}}
|
{{* contact info header for smartphones *}}
|
||||||
<div role="heading " class="contact-info-xs hidden-lg hidden-md">
|
<div role="heading " class="contact-info-xs hidden-lg hidden-md">
|
||||||
<h5 class="media-heading">
|
<h5 class="media-heading">
|
||||||
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><strong>{{$item.name}}</strong></a>
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><strong>{{$item.name}}</strong></a>
|
||||||
<p class="text-muted"><small>
|
<p class="text-muted"><small>
|
||||||
<span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}} — ({{$item.location}}){{/if}}</small>
|
<span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}} — ({{$item.location}}){{/if}}</small>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -141,34 +141,18 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
<div class="dropdown pull-left"><!-- Dropdown -->
|
<div class="dropdown pull-left"><!-- Dropdown -->
|
||||||
{{if $item.thread_level==1}}
|
{{if $item.thread_level==1}}
|
||||||
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a class="dropdown-toggle" type="button" id="wall-item-photo-menu-{{$item.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a class="userinfo" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
|
||||||
<div class="contact-photo-overlay">
|
|
||||||
<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu contact-menu-lg contact-menu menu-popup" role="menu" aria-labelledby="wall-item-photo-menu-{{$item.id}}">
|
|
||||||
{{$item.item_photo_menu}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a class="dropdown-toggle" type="button" id="wall-item-photo-menu-{{$item.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a class="userinfo" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
|
||||||
<div class="contact-photo-overlay">
|
|
||||||
<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu contact-menu-xs contact-menu menu-popup" role="menu" aria-labelledby="wall-item-photo-menu-{{$item.id}}">
|
|
||||||
{{$item.item_photo_menu}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{* The litle overlay avatar picture if someone is posting directly to a wall or a forum *}}
|
{{* The litle overlay avatar picture if someone is posting directly to a wall or a forum *}}
|
||||||
|
|
@ -185,19 +169,11 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
{{* The avatar picture for comments *}}
|
{{* The avatar picture for comments *}}
|
||||||
{{if $item.thread_level!=1}}
|
{{if $item.thread_level!=1}}
|
||||||
<div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
||||||
<a class="dropdown-toggle" type="button" id="wall-item-photo-menu-{{$item.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a class="userinfo" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<div class="contact-photo-image-wrapper">
|
||||||
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
||||||
|
|
||||||
{{* Overlay background on hover the avatar picture *}}
|
|
||||||
<div class="contact-photo-overlay">
|
|
||||||
<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu contact-menu-xs contact-menu menu-popup" role="menu" aria-labelledby="wall-item-photo-menu-{{$item.id}}">
|
|
||||||
{{$item.item_photo_menu}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div><!-- ./Dropdown -->
|
</div><!-- ./Dropdown -->
|
||||||
|
|
@ -207,8 +183,8 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
{{* contact info header*}}
|
{{* contact info header*}}
|
||||||
{{if $item.thread_level==1}}
|
{{if $item.thread_level==1}}
|
||||||
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info hidden-sm hidden-xs media-body"><!-- <= For computer -->
|
||||||
<h4 class="media-heading"><a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name btn-link {{$item.sparkle}}">{{$item.name}}</span></a>
|
<h4 class="media-heading"><a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name btn-link {{$item.sparkle}}">{{$item.name}}</span></a>
|
||||||
{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}} btn-link" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
|
{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link userinfo"><span class="wall-item-name{{$item.osparkle}} btn-link" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
|
||||||
{{if $item.lock}}<span class="navicon lock fakelink" onClick="lockview(event,{{$item.id}});" title="{{$item.lock}}" data-toggle="tooltip"> <small><i class="fa fa-lock"></i></small></span>{{/if}}
|
{{if $item.lock}}<span class="navicon lock fakelink" onClick="lockview(event,{{$item.id}});" title="{{$item.lock}}" data-toggle="tooltip"> <small><i class="fa fa-lock"></i></small></span>{{/if}}
|
||||||
</4>
|
</4>
|
||||||
|
|
||||||
|
|
@ -229,7 +205,7 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
{{* contact info header for smartphones *}}
|
{{* contact info header for smartphones *}}
|
||||||
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs hidden-lg hidden-md"><!-- <= For smartphone (responsive) -->
|
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs hidden-lg hidden-md"><!-- <= For smartphone (responsive) -->
|
||||||
<h5 class="media-heading">
|
<h5 class="media-heading">
|
||||||
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><strong>{{$item.name}}</strong></a>
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><strong>{{$item.name}}</strong></a>
|
||||||
<p class="text-muted">
|
<p class="text-muted">
|
||||||
<small><span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}} — ({{$item.location}}){{/if}}</small>
|
<small><span class="wall-item-ago">{{$item.ago}}</span> {{if $item.location}} — ({{$item.location}}){{/if}}</small>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -242,7 +218,7 @@ as the value of $top_child_total (this is done at the end of this file)
|
||||||
<div class="media-body">{{*this is the media body for comments - this div must be closed at the end of the file *}}
|
<div class="media-body">{{*this is the media body for comments - this div must be closed at the end of the file *}}
|
||||||
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs">
|
<div role="heading " aria-level="{{$item.thread_level}}" class="contact-info-xs">
|
||||||
<h5 class="media-heading">
|
<h5 class="media-heading">
|
||||||
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><strong class="btn-link">{{$item.name}}</strong></a>
|
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link userinfo"><strong class="btn-link">{{$item.name}}</strong></a>
|
||||||
<span class="text-muted">
|
<span class="text-muted">
|
||||||
<small><span title="{{$item.localtime}}" data-toggle="tooltip">{{$item.ago}}</span> {{if $item.location}} — ({{$item.location}}){{/if}}</small>
|
<small><span title="{{$item.localtime}}" data-toggle="tooltip">{{$item.ago}}</span> {{if $item.location}} — ({{$item.location}}){{/if}}</small>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue