Adding correct SCSS file integration with Svelte
This commit is contained in:
David Négrier
parent
1885ea42a4
commit
5cb58d98a0
2
front/dist/resources/style/cowebsite.scss
vendored
2
front/dist/resources/style/cowebsite.scss
vendored
@ -32,7 +32,7 @@
|
||||
position: absolute;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
|
||||
52
front/dist/resources/style/style.css
vendored
52
front/dist/resources/style/style.css
vendored
@ -1,9 +1,9 @@
|
||||
*{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
cursor: url('/resources/logos/cursor_normal.png'), auto;
|
||||
cursor: url('../logos/cursor_normal.png'), auto;
|
||||
}
|
||||
* a, button, select{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
body{
|
||||
overflow: hidden;
|
||||
@ -39,7 +39,7 @@ body .message-info.warning{
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
background-color: #00000099;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
.video-container i{
|
||||
position: absolute;
|
||||
@ -75,7 +75,7 @@ body .message-info.warning{
|
||||
|
||||
.video-container button.report{
|
||||
display: block;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
background: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
@ -108,7 +108,7 @@ body .message-info.warning{
|
||||
left: 5px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
@ -118,7 +118,7 @@ body .message-info.warning{
|
||||
left: 36px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
.video-container img.active {
|
||||
display: block !important;
|
||||
@ -126,7 +126,7 @@ body .message-info.warning{
|
||||
|
||||
.video-container video{
|
||||
height: 100%;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.video-container video:focus{
|
||||
@ -206,7 +206,7 @@ video#myCamVideo{
|
||||
}
|
||||
/*btn animation*/
|
||||
.btn-cam-action div{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
/*position: absolute;*/
|
||||
border: solid 0px black;
|
||||
width: 44px;
|
||||
@ -260,7 +260,7 @@ video#myCamVideo{
|
||||
top: calc(48px - 37px);
|
||||
left: calc(48px - 41px);
|
||||
position: relative;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
@ -572,7 +572,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
margin: 2%;
|
||||
flex-basis: 96%;
|
||||
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
pointer-events: auto;
|
||||
/*flex-shrink: 2;*/
|
||||
}
|
||||
@ -590,7 +590,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
.sidebar > div {
|
||||
margin: 2%;
|
||||
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
@ -600,7 +600,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
}
|
||||
|
||||
.sidebar > div video {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
/* Let's make sure videos are vertically centered if they need to be cropped */
|
||||
@ -625,7 +625,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
margin: 1%;
|
||||
max-height: 96%;
|
||||
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.chat-mode > div:hover {
|
||||
@ -715,7 +715,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
margin-top: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
padding: 0 5px;
|
||||
transition: all .5s ease;
|
||||
transform: rotateY(0);
|
||||
@ -739,7 +739,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
|
||||
.main-console div.console:hover,
|
||||
.message-container div.clear:hover {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
top: calc(100% + 5px);
|
||||
transform: scale(1.2) translateY(3px);
|
||||
}
|
||||
@ -772,7 +772,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
transition: all .2s ease;
|
||||
}
|
||||
.main-console .btn-action .btn:hover{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
background-color: #ffda01;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
@ -787,7 +787,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
|
||||
.main-console .menu span {
|
||||
margin: 20px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.main-console .menu span.active {
|
||||
@ -821,10 +821,10 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
}
|
||||
.main-console section div.upload label img{
|
||||
height: 150px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
.main-console section div.upload label img{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -917,7 +917,7 @@ div.modal-report-user{
|
||||
right: 0;
|
||||
left: auto;
|
||||
top: 0;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 10px;
|
||||
@ -936,7 +936,7 @@ div.modal-report-user{
|
||||
transition: all .2s ease;
|
||||
}
|
||||
.modal-report-user button:hover{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
background-color: #ffda01;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
@ -979,7 +979,7 @@ div.modal-report-user{
|
||||
}
|
||||
.discussion .active-btn{
|
||||
display: none;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #2d2d2dba;
|
||||
@ -1008,7 +1008,7 @@ div.modal-report-user{
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
.discussion .close-btn img{
|
||||
height: 15px;
|
||||
@ -1033,7 +1033,7 @@ div.modal-report-user{
|
||||
background-color: #ffffff69;
|
||||
padding: 5px;
|
||||
border-radius: 15px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.discussion .participants .participant:hover{
|
||||
@ -1066,7 +1066,7 @@ div.modal-report-user{
|
||||
}
|
||||
|
||||
.discussion .participants .participant button.report-btn{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
position: absolute;
|
||||
background-color: #2d2d2dba;
|
||||
right: 34px;
|
||||
@ -1176,7 +1176,7 @@ div.action.danger{
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
div.action p.action-body{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
cursor: url('../logos/cursor_pointer.png'), pointer;
|
||||
padding: 10px;
|
||||
background-color: #2d2d2dba;
|
||||
color: #fff;
|
||||
|
||||
@ -7,11 +7,12 @@
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"@types/google-protobuf": "^3.7.3",
|
||||
"@types/jasmine": "^3.5.10",
|
||||
"@types/mini-css-extract-plugin": "^1.4.3",
|
||||
"@types/node": "^15.3.0",
|
||||
"@types/quill": "^1.3.7",
|
||||
"@types/webpack-dev-server": "^3.11.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.23.0",
|
||||
"@typescript-eslint/parser": "^4.23.0",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"css-loader": "^5.2.4",
|
||||
"eslint": "^7.26.0",
|
||||
"html-webpack-plugin": "^5.3.1",
|
||||
@ -25,6 +26,7 @@
|
||||
"svelte-preprocess": "^4.7.3",
|
||||
"ts-loader": "^9.1.2",
|
||||
"ts-node": "^9.1.1",
|
||||
"tsconfig-paths": "^3.9.0",
|
||||
"typescript": "^4.2.4",
|
||||
"webpack": "^5.37.0",
|
||||
"webpack-cli": "^4.7.0",
|
||||
@ -45,9 +47,9 @@
|
||||
"socket.io-client": "^2.3.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "webpack serve --open",
|
||||
"build": "NODE_ENV=production webpack",
|
||||
"test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
|
||||
"start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
|
||||
"build": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
|
||||
"test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
|
||||
"lint": "node_modules/.bin/eslint src/ . --ext .ts",
|
||||
"fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"
|
||||
}
|
||||
|
||||
@ -10,18 +10,18 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.menuIcon button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
.menuIcon button img{
|
||||
img {
|
||||
width: 14px;
|
||||
padding-top: 0;
|
||||
/*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
|
||||
}
|
||||
}
|
||||
.menuIcon section {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
import { derived, writable, Writable } from "svelte/store";
|
||||
|
||||
class RequestedConstraintsStore {
|
||||
constructor(
|
||||
public camera: Writable<boolean> = writable(false),
|
||||
public microphone: Writable<boolean> = writable(false),
|
||||
) { }
|
||||
|
||||
get fullname() {
|
||||
// Use derived to access writable values and export as readonly
|
||||
return derived(
|
||||
[this.camera, this.microphone],
|
||||
([$camera, $microphone]) => {
|
||||
console.log("cam or mic", $camera || $microphone)
|
||||
return $camera || $microphone;
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Export a singleton
|
||||
export const myFormStore = new MyFormStore();
|
||||
8
front/tsconfig-for-jasmine.json
Normal file
8
front/tsconfig-for-jasmine.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"include": ["./src/**/*", "./tests/**/*"],
|
||||
"compilerOptions": {
|
||||
"module": "CommonJS",
|
||||
"lib": ["es2015","dom"],
|
||||
}
|
||||
}
|
||||
7
front/tsconfig-for-webpack.json
Normal file
7
front/tsconfig-for-webpack.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,13 @@
|
||||
{
|
||||
// "include": ["src/**/*", "webpack.config.ts"],
|
||||
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"module": "CommonJS",
|
||||
//"module": "CommonJS",
|
||||
"module": "ESNext",
|
||||
"target": "ES2017",
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
import type {Configuration} from "webpack";
|
||||
import type WebpackDevServer from "webpack-dev-server";
|
||||
import SveltePreprocess from 'svelte-preprocess';
|
||||
import Autoprefixer from 'autoprefixer';
|
||||
//import SveltePreprocess from 'svelte-preprocess';
|
||||
//import Autoprefixer from 'autoprefixer';
|
||||
//import autoPreprocess from 'svelte-preprocess';
|
||||
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
|
||||
|
||||
//const path = require('path');
|
||||
//const webpack = require('webpack');
|
||||
//const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
//const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
//const sveltePreprocess = require('svelte-preprocess');
|
||||
|
||||
const mode = process.env.NODE_ENV ?? 'development';
|
||||
const isProduction = mode === 'production';
|
||||
@ -41,7 +49,27 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [MiniCssExtractPlugin.loader, 'css-loader?url=false', 'sass-loader'],
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader, {
|
||||
loader: 'css-loader',
|
||||
/*options: {
|
||||
url: false,
|
||||
sourceMap: true
|
||||
}*/
|
||||
}, 'sass-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: 'css-loader',
|
||||
/*options: {
|
||||
url: false,
|
||||
sourceMap: true
|
||||
}*/
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(html|svelte)$/,
|
||||
@ -60,13 +88,19 @@ module.exports = {
|
||||
noPreserveState: false,
|
||||
optimistic: true,
|
||||
},
|
||||
//preprocess: autoPreprocess({}),
|
||||
preprocess: sveltePreprocess({
|
||||
scss: true,
|
||||
sass: true,
|
||||
})
|
||||
|
||||
// FIXME: SveltePreprocess does not work here
|
||||
/*preprocess: SveltePreprocess({
|
||||
scss: true,
|
||||
sass: true,
|
||||
postcss: {
|
||||
plugins: [
|
||||
Autoprefixer
|
||||
//Autoprefixer
|
||||
]
|
||||
}
|
||||
})*/
|
||||
@ -82,7 +116,10 @@ module.exports = {
|
||||
fullySpecified: false
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.(ttf|eot|svg|png|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
type: 'asset/resource'
|
||||
}
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
@ -105,7 +142,8 @@ module.exports = {
|
||||
require('webpack-require-http')
|
||||
],*/
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
|
||||
new HtmlWebpackPlugin(
|
||||
{
|
||||
template: './dist/index.tmpl.html.tmp',
|
||||
@ -150,7 +188,7 @@ module.exports = {
|
||||
modules: false,
|
||||
assets: true,
|
||||
entrypoints: false,
|
||||
errorDetails: false
|
||||
errorDetails: false,
|
||||
}
|
||||
|
||||
} as Configuration & WebpackDevServer.Configuration;
|
||||
|
||||
4929
front/yarn.lock
Normal file
4929
front/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user