NoLog.cz/gancio
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

minor on wc, update changelog and docs on embed

Browse source
This commit is contained in:
lesion 2022-02-01 16:53:44 +01:00
parent eeb853ced5
commit 73f03035d7
No known key found for this signature in database
GPG key ID: 352918250B012177
6 changed files with 1252 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG
View file

@ -1,5 +1,11 @@
All notable changes to this project will be documented in this file.
### 1.3.1 - 1 feb '22
- inherits tags in recurring events [#138](https://framagit.org/les/gancio/-/issues/138)
- you can now skip an occurrence of a recurring event
- fix `show_recurrent` event in webcomponent and API
- add new webcomponent `sidebar` attribute and a [`fullwith` layout](https://gancio.org/usage/embed#embed-event-lists)
### 1.3.0 - 26 gen '22
- add mariadb support
- add [microdata](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) support

1195
docs/assets/js/gancio-events.es.js Normal file
View file

File diff suppressed because it is too large Load diff

6
docs/changelog.md
View file

@ -7,6 +7,12 @@ nav_order: 10
All notable changes to this project will be documented in this file.
### 1.3.1 - 1 feb '22
- inherits tags in recurring events [#138](https://framagit.org/les/gancio/-/issues/138)
- you can now skip an occurrence of a recurring event
- fix `show_recurrent` event in webcomponent and API
- add new webcomponent `sidebar` attribute and a [`fullwith` layout](https://gancio.org/usage/embed#embed-event-lists)
### 1.3.0 - 26 gen '22
- add mariadb support
- add [microdata](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) support

48
docs/embed.md
View file

@ -28,7 +28,7 @@ To embed an event in webpages you use `<gancio-event>` custom element, you can c
<gancio-event id=17 baseurl='https://demo.gancio.org'></gancio-event>
```
<script src='https://demo.gancio.org/gancio-events.es.js'></script>
<script src='/assets/js/gancio-events.es.js'></script>
<gancio-event id=17 baseurl='https://demo.gancio.org'></gancio-event>
@ -37,15 +37,53 @@ You can also embed a list of events using `<gancio-events>` custom element, you
```html
<gancio-events baseurl='https://demo.gancio.org'>
<a href='https://demo.gancio.org'>Gancio Events</a>
<gancio-events baseurl='https://gancio.cisti.org'>
<a href='https://gancio.cisti.org'>Gancio Events</a>
</gancio-events>
```
<gancio-events baseurl='https://demo.gancio.org'><a href='https://demo.gancio.org'>Gancio Events</a></gancio-events>
<script>
var theme = 'light';
var sidebar = 'true';
function toggleDark() {
var items = document.getElementsByTagName('gancio-events');
theme = theme === 'dark' ? 'light' : 'dark';
items[0].setAttribute('theme', theme );
}
function toggleSidebar() {
var items = document.getElementsByTagName('gancio-events');
sidebar = sidebar === 'true' ? 'false' : 'true';
items[0].setAttribute('sidebar', sidebar );
}
function changeMax(value) {
var items = document.getElementsByTagName('gancio-events');
items[0].setAttribute('maxlength', value);
}
function changeTitle (title) {
var items = document.getElementsByTagName('gancio-events');
items[0].setAttribute('title', title)
}
</script>
<style>
label {
display: block;
margin: 0px;
padding: 10px;
}
</style>
<label><input type='checkbox' onchange="toggleDark()"/> Dark</label>
<label><input type='checkbox' onchange="toggleSidebar()"/> Sidebar</label>
<label>Max items <input value=4 type='number' label='Max items' onchange="changeMax(this.value)"/></label>
<label>Title <input value='Gancio' type='text' onkeyup="changeTitle(this.value)"/></label>
<gancio-events sidebar='true' title='Gancio' theme='light' maxlength=4 baseurl='https://gancio.cisti.org'><a href='https://gancio.cisti.org'>Gancio Events</a></gancio-events>
> info "Customize"
> Note that you can modify the title (or completely remove it using an empty `title` param) and the icon,
> Note that you can modify the title (or completely remove it using an empty `title` param),
> you can limit the list to a maximum number of events using the `maxlength` parameter and filter events by `tags` or `places` using that parameters (it's easier using **gancio** than to explain it here)

2
static/gancio-events.es.js
View file

@ -855,7 +855,7 @@ function instance$1($$self, $$props, $$invalidate) {
class GancioEvents extends SvelteElement {
constructor(options) {
super();
this.shadowRoot.innerHTML = `<style>#gancioEvents{font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";overflow-x:hidden;width:100%;box-sizing:content-box;margin:0 auto;font-size:1rem}.nosidebar{max-width:1200px}.event{display:flex;flex-direction:row;flex-wrap:nowrap}#header{padding:1.2rem 1rem;background-color:var(--bg-odd-color)}.sidebar{max-width:500px;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;border-radius:5px;font-size:1rem}.event .img{width:100%;max-width:500px;height:250px;flex:1 0 auto}@media screen and (max-width: 800px){.event{flex-wrap:wrap}.event .img{max-width:100%}}.event img{object-fit:cover;border-radius:15px;width:100%;height:100%;box-shadow:rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px}.event .content{display:flex;flex:auto;flex-direction:column;min-width:300px}.nosidebar .event{margin-bottom:2rem}.nosidebar .content{margin-left:1rem;margin-top:5px}.tags{margin-top:2px}#logo{position:absolute;top:10px;right:10px;height:40px}a{text-decoration:none;color:var(--text-color);display:flex;flex-direction:column;flex:1 1 100%;padding:8px 20px;margin:0;line-height:1.275rem;font-weight:400;font-size:.875rem;position:relative;transition:background-color .3s cubic-bezier(.25,.8,.5,1), padding .3s;box-sizing:content-box}a:hover .title,a:focus .title,a:active .title{text-decoration:underline}.dark{--bg-odd-color:#161616;--bg-even-color:#222;--bg-hover-color:#333;--text-color:white;--title-color:white;--line-color:rgba(120, 120, 120, 0.2)}.light{--bg-odd-color:#f5f5f5;--bg-even-color:#FAFAFA;--bg-hover-color:#EEE;--text-color:#222;--title-color:black;--line-color:rgba(220, 220, 220, 0.9)}.sidebar a{background-color:var(--bg-even-color);border-bottom:1px solid var(--line-color)}.sidebar a:hover,.sidebar a:focus,.sidebar a:active{background-color:var(--bg-hover-color);padding-left:15px;padding-right:25px}.place{font-weight:400;font-size:1.2rem;line-height:1.4rem;color:orangered}.title{color:var(--title-color);font-weight:bold;font-size:1.3rem;line-height:1.1em}.nosidebar .title{font-size:1.9em;line-height:1.1em}.subtitle{font-size:1rem;line-height:1.1em;color:var(--title-color);opacity:0.9}.tag{margin-right:10px}</style>`;
this.shadowRoot.innerHTML = `<style>#gancioEvents{font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";overflow-x:hidden;width:100%;box-sizing:content-box;margin:0 auto;font-size:1rem}.nosidebar{max-width:1200px}#header{padding:1.2rem 1rem;background-color:var(--bg-odd-color)}.sidebar{max-width:500px;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;border-radius:5px;font-size:1rem}.event .img{width:100%;max-width:500px;height:250px;flex:1 0 auto}@media screen and (max-width: 800px){.event{flex-wrap:wrap}.event .img{max-width:100%}}.event img{object-fit:cover;border-radius:15px;width:100%;height:100%;box-shadow:rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px}.nosidebar .event{margin-bottom:2rem}.nosidebar .content{margin-left:1rem;margin-top:5px}.tags{margin-top:2px}#logo{position:absolute;top:10px;right:10px;height:40px}a{text-decoration:none;color:var(--text-color);display:flex;padding:8px 20px;margin:0;line-height:1.275rem;font-weight:400;font-size:.875rem;position:relative;transition:background-color .3s cubic-bezier(.25,.8,.5,1), padding .3s;box-sizing:content-box}a:hover .title,a:focus .title,a:active .title{text-decoration:underline}.dark{--bg-odd-color:#161616;--bg-even-color:#222;--bg-hover-color:#333;--text-color:white;--title-color:white;--line-color:rgba(120, 120, 120, 0.2)}.light{--bg-odd-color:#f5f5f5;--bg-even-color:#FAFAFA;--bg-hover-color:#EEE;--text-color:#222;--title-color:black;--line-color:rgba(220, 220, 220, 0.9)}.sidebar a{background-color:var(--bg-even-color);border-bottom:1px solid var(--line-color)}.sidebar a:hover,.sidebar a:focus,.sidebar a:active{background-color:var(--bg-hover-color);padding-left:15px;padding-right:25px}.place{font-weight:400;font-size:1.2rem;line-height:1.4rem;color:orangered}.title{color:var(--title-color);font-weight:bold;font-size:1.3rem;line-height:1.1em}.nosidebar .title{font-size:1.9em;line-height:1.1em}.subtitle{font-size:1rem;line-height:1.1em;color:var(--title-color);opacity:0.9}.tag{margin-right:10px;display:inline-block}</style>`;
init(this, {
target: this.shadowRoot,
props: attribute_to_object(this.attributes),

14
webcomponents/src/GancioEvents.svelte
View file

@ -130,11 +130,6 @@
.nosidebar {
max-width: 1200px;
}
.event {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#header{
padding: 1.2rem 1rem;
@ -171,12 +166,6 @@
height: 100%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.event .content {
display: flex;
flex: auto;
flex-direction: column;
min-width: 300px;
}
.nosidebar .event {
margin-bottom: 2rem;
@ -202,8 +191,6 @@ a {
text-decoration: none;
color: var(--text-color);
display: flex;
flex-direction: column;
flex: 1 1 100%;
padding: 8px 20px;
margin: 0;
line-height: 1.275rem;
@ -278,6 +265,7 @@ a:active .title {
.tag {
margin-right: 10px;
display: inline-block;
}
</style>