mirror/php-typemill
1
0
Fork 0
mirror of https://github.com/typemill/typemill.git synced 2025-07-14 11:06:20 +02:00
Code Issues Releases Wiki Activity

Fix image-prevoew in image component

Browse Source
This commit is contained in:
trendschau
2021-12-28 14:20:09 +01:00
parent f5906d4c07
commit b559b5d163
2 changed files with 60 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
system/author/js/vue-shared.js
View File

@ -495,7 +495,7 @@ Vue.component('component-image', {
'<div class="flex flex-wrap item-start">' +
'<div class="w-50">' +
'<div class="w6 h6 bg-black-40 dtc v-mid bg-chess">' +
'<img v-if="imgpreview" :src="imgpreview" class="mw6 max-h6 dt center">' +
'<img :src="getimagesrc(value)" class="mw6 max-h6 dt center">' +
'</div>' +
'</div>' +
'<div class="w-50 ph3 lh-copy f6 relative">' +
@ -523,7 +523,7 @@ Vue.component('component-image', {
'@input="update($event, name)">' +
'</div>' +
'<div class="dib w-100 mt2">' +
'<button class="w-100 pointer ba br1 b--tm-green bg--tm-gray black pa2 ma0 tc" @click.prevent="switchQuality()">{{ qualitylabel }}</button>' +
'<button class="w-100 pointer ba br1 b--tm-green bg--tm-gray black pa2 ma0 tc" @click.prevent="switchQuality(value)">{{ qualitylabel }}</button>' +
'</div>' +
'</div>' +
'<div v-if="description" class="w-100 dib"><p>{{ description|translate }}</p></div>' +
@ -546,23 +546,25 @@ Vue.component('component-image', {
qualitylabel: false,
}
},
mounted: function(){
if(this.value !== null && this.value !== '')
{
this.imgpreview = myaxios.defaults.baseURL + '/' + this.value;
if(this.value.indexOf("media/live") > -1 )
{
this.quality = 'live';
this.qualitylabel = 'switch quality to: original';
}
else if(this.value.indexOf("media/original") > -1)
{
this.quality = 'original';
this.qualitylabel = 'switch quality to: live';
}
}
},
methods: {
getimagesrc: function(value)
{
if(value !== null && value !== '')
{
var imgpreview = myaxios.defaults.baseURL + '/' + value;
if(value.indexOf("media/live") > -1 )
{
this.quality = 'live';
this.qualitylabel = 'switch quality to: original';
}
else if(value.indexOf("media/original") > -1)
{
this.quality = 'original';
this.qualitylabel = 'switch quality to: live';
}
return imgpreview;
}
},
update: function(value)
{
FormBus.$emit('forminput', {'name' : this.name, 'value' : value});
@ -582,21 +584,24 @@ Vue.component('component-image', {
this.imgpreview = false;
this.update('');
},
switchQuality: function()
switchQuality: function(value)
{
if(this.quality == 'live')
if(value !== null && value !== '')
{
var newUrl = this.value.replace("media/live", "media/original");
this.update(newUrl);
this.quality = 'original';
this.qualitylabel = 'switch quality to: live';
}
else
{
var newUrl = this.value.replace("media/original", "media/live");
this.update(newUrl);
this.quality = 'live';
this.qualitylabel = 'switch quality to: original';
if(this.quality == 'live')
{
var newUrl = value.replace("media/live", "media/original");
this.update(newUrl);
this.quality = 'original';
this.qualitylabel = 'switch quality to: live';
}
else
{
var newUrl = value.replace("media/original", "media/live");
this.update(newUrl);
this.quality = 'live';
this.qualitylabel = 'switch quality to: original';
}
}
},
openmedialib: function()

69
themes/cyanine/css/style.css
View File

@ -129,10 +129,6 @@ footer a:hover, footer a:focus, footer a:active{
text-decoration: none;
}
/* Fix background for hightlight plugin
code.hljs{ background: transparent; }
*/
/* For definition list */
dt::after{
content: ":";
@ -147,15 +143,10 @@ figure{
margin: 2em auto;
padding: 0;
}
figure.left{
width: auto;
float: left;
margin: 0 2em 2em 0;
}
figure.right{
width: auto;
float: right;
margin: 0 0 2em 2em;
figure.right, figure.left {
width: auto;
float: none;
margin: auto auto;
}
figure img{
display: block;
@ -242,6 +233,7 @@ a.tm-heading-anchor {
font-weight: 300;
opacity: 0;
text-decoration: none;
float: right;
}
a.tm-heading-anchor:hover,a.tm-heading-anchor:focus {
opacity: 1;
@ -261,30 +253,6 @@ h6:hover > .tm-heading-anchor{
text-decoration: none;
}
/* style the typemill download-button for files
a.tm-download
{
line-height: 35px;
margin-left: 40px;
}
a.tm-download::before{
content: '\2193';
position: absolute;
margin-left: -40px;
width: 30px;
height: 30px;
font-family: Courier, Calibri, "Segoe UI", Roboto, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1em;
font-weight: 900;
border-radius: 50%;
text-align: center;
text-decoration: none;
}
a.tm-download:hover::before{
text-decoration: none;
}
*/
/* style the typemill download-button for files */
a.tm-download{}
a.tm-download::before{
@ -497,6 +465,19 @@ button.play-video::after {
h1,h2,h3,h4,h5,h6{ hyphens: manual; }
}
@media (min-width: 40em) {
figure.right {
width: auto;
float: right;
margin: 0 0 2em 2em;
}
figure.left {
width: auto;
float: left;
margin: 0 2em 2em 0;
}
}
@media screen and (min-width:50em) {
.grid-container{
display: grid;
@ -543,6 +524,9 @@ button.play-video::after {
font-size: inherit;
max-height: inherit;
}
a.tm-heading-anchor {
float: left;
}
}
@media print {
@ -553,14 +537,6 @@ button.play-video::after {
margin-top: -10px!important;
padding-top: 0px!important;
}
/* .logo a[href]:after {
content: "Homepage: " attr(href);
display: block;
margin: 1rem 0;
font-size: 14px;
font-weight: normal;
}
*/
.logo-image{
max-width: 150px;
}
@ -596,4 +572,7 @@ button.play-video::after {
nav .mw6{
width: 100%;
}
a.tm-heading-anchor {
display: none;
}
}