fix: set vite base path during deploy build + allow google fonts (#4217)
* fix: set vite base path during deploy build + allow google fonts * ci: only set vite base path if build is for production release * test: add html-validate ignore rules for vite generated content that is valid * fix: show buttons on regular sessions without agenda materials + link to legacy agenda * fix: temporarily hide left menu on agenda-neue and floor-plan-neue * fix: set resize handler to whole app * fix: apply html-validate ignore to agenda-neue only + deploy/build.sh fix * test: change old agenda cypress to always take the same elements to avoid #3564
This commit is contained in:
parent
ea55dfd056
commit
744bcc54e8
|
@ -127,7 +127,7 @@
|
|||
// -----------------------------------
|
||||
// -> Schedule List
|
||||
// -----------------------------------
|
||||
agenda-schedule-list.mt-3(ref='schdList')
|
||||
agenda-schedule-list.mt-3
|
||||
|
||||
// -----------------------------------
|
||||
// -> Anchored Day Quick Access Menu
|
||||
|
@ -180,7 +180,6 @@ const state = reactive({
|
|||
|
||||
// REFS
|
||||
|
||||
const schdList = ref(null)
|
||||
const searchIpt = ref(null)
|
||||
|
||||
// WATCHERS
|
||||
|
@ -272,25 +271,6 @@ function toggleSettings () {
|
|||
})
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Handle browser resize
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
agendaStore.$patch({ viewport: Math.round(window.innerWidth) })
|
||||
// for (const entry of entries) {
|
||||
// const newWidth = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width
|
||||
// }
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver.observe(schdList.value.$el)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(schdList.value.$el)
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Handle day indicator / scroll
|
||||
// --------------------------------------------------------------------
|
||||
|
|
|
@ -139,7 +139,7 @@ const downloadIcsOptions = [
|
|||
// COMPUTED
|
||||
|
||||
const shortMode = computed(() => {
|
||||
return agendaStore.viewport < 1350
|
||||
return agendaStore.viewport <= 1350
|
||||
})
|
||||
|
||||
// METHODS
|
||||
|
@ -215,6 +215,10 @@ function scrollToNow (ev) {
|
|||
}
|
||||
}
|
||||
|
||||
.card-body .n-button {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-btnrow {
|
||||
border: 1px solid #CCC;
|
||||
padding: 8px 6px 6px 6px;
|
||||
|
|
|
@ -250,7 +250,7 @@ const meetingEvents = computed(() => {
|
|||
|
||||
// -> Populate event links
|
||||
const links = []
|
||||
if (item.flags.showAgenda) {
|
||||
if (item.flags.showAgenda || ['regular', 'plenary'].includes(item.type)) {
|
||||
if (item.flags.agenda) {
|
||||
links.push({
|
||||
id: `lnk-${item.id}-tar`,
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
<template lang="pug">
|
||||
n-theme
|
||||
n-message-provider
|
||||
router-view.meeting
|
||||
.app-container(ref='appContainer')
|
||||
router-view.meeting
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onBeforeUnmount ,onMounted, ref } from 'vue'
|
||||
import { NMessageProvider } from 'naive-ui'
|
||||
|
||||
import { useAgendaStore } from './store'
|
||||
|
@ -15,9 +17,32 @@ import NTheme from '../components/n-theme.vue'
|
|||
|
||||
const agendaStore = useAgendaStore()
|
||||
|
||||
// STATE
|
||||
|
||||
const appContainer = ref(null)
|
||||
|
||||
// INIT
|
||||
|
||||
agendaStore.fetch()
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
// Handle browser resize
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
agendaStore.$patch({ viewport: Math.round(window.innerWidth) })
|
||||
// for (const entry of entries) {
|
||||
// const newWidth = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width
|
||||
// }
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver.observe(appContainer.value, { box: 'device-pixel-content-box' })
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(appContainer.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
@ -6,10 +6,26 @@ import router from './router'
|
|||
|
||||
const app = createApp(App, {})
|
||||
|
||||
// Initialize store (Pinia)
|
||||
|
||||
const pinia = createPinia()
|
||||
pinia.use(piniaPersist)
|
||||
|
||||
app.use(pinia)
|
||||
|
||||
// Initialize router
|
||||
|
||||
router.beforeEach((to, from) => {
|
||||
// Route Flags
|
||||
// -> Remove Left Menu
|
||||
if (to.meta.hideLeftMenu) {
|
||||
const leftMenuRef = document.querySelector('.leftmenu')
|
||||
if (leftMenuRef) {
|
||||
leftMenuRef.remove()
|
||||
}
|
||||
}
|
||||
})
|
||||
app.use(router)
|
||||
|
||||
// Mount App
|
||||
|
||||
app.mount('#app-meeting')
|
||||
|
|
|
@ -6,12 +6,18 @@ export default createRouter({
|
|||
{
|
||||
name: 'agenda',
|
||||
path: '/meeting/:meetingNumber(\\d+)?/agenda-neue',
|
||||
component: () => import('./Agenda.vue')
|
||||
component: () => import('./Agenda.vue'),
|
||||
meta: {
|
||||
hideLeftMenu: true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'floor-plan',
|
||||
path: '/meeting/:meetingNumber(\\d+)?/floor-plan-neue',
|
||||
component: () => import('./FloorPlan.vue')
|
||||
component: () => import('./FloorPlan.vue'),
|
||||
meta: {
|
||||
hideLeftMenu: true
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
@ -21,7 +21,7 @@ describe('meeting agenda', () => {
|
|||
})
|
||||
|
||||
it('filtering the agenda should modify the URL', () => {
|
||||
cy.get('.agenda-filter-groupselectbtn').any(5).as('selectedGroups').each(randomElement => {
|
||||
cy.get('.agenda-filter-groupselectbtn').take(5).as('selectedGroups').each(randomElement => {
|
||||
cy.wrap(randomElement).click()
|
||||
cy.wrap(randomElement).invoke('attr', 'data-filter-item').then(keyword => {
|
||||
cy.url().should('contain', keyword)
|
||||
|
@ -33,7 +33,7 @@ describe('meeting agenda', () => {
|
|||
})
|
||||
|
||||
it('selecting an area should select all corresponding groups', () => {
|
||||
cy.get('.agenda-filter-areaselectbtn').any().click().invoke('attr', 'data-filter-item').then(area => {
|
||||
cy.get('.agenda-filter-areaselectbtn').first().click().invoke('attr', 'data-filter-item').then(area => {
|
||||
cy.url().should('contain', area)
|
||||
|
||||
cy.get(`.agenda-filter-groupselectbtn[data-filter-keywords*="${area}"]`).each(group => {
|
||||
|
|
|
@ -32,3 +32,12 @@ Cypress.Commands.add('any', { prevSubject: 'element' }, (subject, size = 1) => {
|
|||
cy.wrap(elementList)
|
||||
})
|
||||
})
|
||||
|
||||
Cypress.Commands.add('take', { prevSubject: 'element' }, (subject, size = 1) => {
|
||||
cy.wrap(subject).then(elementList => {
|
||||
elementList = (elementList.jquery) ? elementList.get() : elementList
|
||||
elementList = Cypress._.take(elementList, size)
|
||||
elementList = (elementList.length > 1) ? elementList : elementList[0]
|
||||
cy.wrap(elementList)
|
||||
})
|
||||
})
|
||||
|
|
|
@ -3,5 +3,9 @@
|
|||
echo "Compiling native node packages..."
|
||||
yarn rebuild
|
||||
echo "Packaging static assets..."
|
||||
yarn build
|
||||
if [ "${SHOULD_DEPLOY}" == "true" ]; then
|
||||
yarn build --base=https://www.ietf.org/lib/dt/$PKG_VERSION/
|
||||
elif
|
||||
yarn build
|
||||
fi
|
||||
yarn legacy:build
|
||||
|
|
|
@ -544,7 +544,7 @@ RFCDIFF_BASE_URL = "https://www.ietf.org/rfcdiff"
|
|||
IDNITS_BASE_URL = "https://author-tools.ietf.org/api/idnits"
|
||||
|
||||
# Content security policy configuration (django-csp)
|
||||
CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'", f"data: {IDTRACKER_BASE_URL} https://www.ietf.org/ https://analytics.ietf.org/")
|
||||
CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'", f"data: {IDTRACKER_BASE_URL} https://www.ietf.org/ https://analytics.ietf.org/ https://fonts.googleapis.com/")
|
||||
|
||||
# The name of the method to use to invoke the test suite
|
||||
TEST_RUNNER = 'ietf.utils.test_runner.IetfTestRunner'
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
{% endblock %}
|
||||
{% block pagehead %}
|
||||
<!-- AGENDA VUE COMPONENT -->
|
||||
<!-- [html-validate-disable-block void-style, attribute-empty-style] -->
|
||||
{{ schedule_json|json_script:"agenda-data" }}
|
||||
{% vite_asset 'client/agenda/main.js' %}
|
||||
{% endblock %}
|
||||
|
@ -68,7 +69,7 @@ body {
|
|||
{% block precontent %}
|
||||
<div class="meeting-switch">
|
||||
<i class="bi bi-arrow-left-right me-2"></i>
|
||||
<a href="{% url 'agenda-neue' num=schedule.meeting.number %}">Switch to Legacy Agenda Display</a>
|
||||
<a href="{% url 'ietf.meeting.views.agenda' num=schedule.meeting.number %}">Switch to Legacy Agenda Display</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
|
|
|
@ -852,6 +852,10 @@ class IetfTestRunner(DiscoverRunner):
|
|||
"script-type": "off",
|
||||
# django-bootstrap5 seems to still generate 'checked="checked"', ignore:
|
||||
"attribute-boolean-style": "off",
|
||||
# self-closing style tags are valid in HTML5. Both self-closing and non-self-closing tags are accepted. (vite generates self-closing link tags)
|
||||
# "void-style": "off",
|
||||
# Both attributes without value and empty strings are equal and valid. (vite generates empty value attributes)
|
||||
# "attribute-empty-style": "off"
|
||||
},
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue