ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

style embed preview

Browse Source
This commit is contained in:
Alina Beck 2019-10-02 15:49:23 +02:00
parent ec12171e80
commit 99629991d0
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
webapp/components/Editor/Editor.vue
View File

@ -345,10 +345,33 @@ li > p {
.embed-container {
position: relative;
padding: 0;
margin: $space-small auto;
overflow: hidden;
border-radius: $border-radius-base;
border: 1px solid $color-neutral-70;
padding: $space-x-small;
overflow: hidden;
background-color: $color-neutral-90;
}
.embed-content {
width: 100%;
height: 100%;
cursor: pointer;
h4 {
margin: $space-small 0 0 $space-small;
}
p,
a {
display: block;
margin: 0 0 0 $space-small;
}
}
.embed-preview-image {
width: 100%;
height: auto;
}
.embed-overlay {

20
webapp/components/Editor/nodes/Embed.js
View File

@ -6,25 +6,25 @@ import { allowEmbedIframesMutation } from '~/graphql/User.js'
const template = `
<ds-container width="small" class="embed-container">
<section @click.prevent="clickPreview" class="embed-content">
<img v-show="showPreviewImage" :src="embedImage" class="embed-preview-image" />
<div v-show="!showPreviewImage" v-html="embedHtml" />
<h4>{{embedTitle}}</h4>
<p>{{embedDescription}}</p>
<a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>
</section>
<aside v-if="showOverlay" class="embed-overlay">
<ds-text v-if="!isOnlyLink">Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
<h3>Achte auf deine Daten!</h3>
<ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
<div class="embed-buttons">
<ds-button primary @click.prevent="allowEmbedTemporar('openIframe')">jetzt ansehen</ds-button>
<ds-button ghost @click.prevent="showOverlay = false">Abbrechen</ds-button>
</div>
<label class="embed-checkbox">
<input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" id="dataEmbedUrl" />
<input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" />
<span>Inhalte von Drittanbietern immer zulassen</span>
</label>
</aside>
<img v-show="showPreviewImage" style="cursor: pointer" :src="embedImage" alt="dataEmbedUrl" @click.prevent="clickPreview" height="270" width="auto" />
<div v-show="!showPreviewImage" v-html="embedHtml" />
<p style="color:black">
<div >{{ embedTitle }}</div>
<div>{{ embedDescription }}</div>
<a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" >
<em> {{ dataEmbedUrl }} </em>
</a>
</ds-container>
`