Skip to content

Commit 39f2cc4

Browse files
w3bdesignw3bdesign
authored
Merge pull request #957 from w3bdesign/dev
Replace CSS with Tailwind
2 parents 6995b8f + c28eb12 commit 39f2cc4

File tree

3 files changed

+40
-106
lines changed

3 files changed

+40
-106
lines changed

‎public/css/app.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -778,6 +778,22 @@ video {
778778
height: 100vh;
779779
}
780780

781+
.h-full {
782+
height: 100%;
783+
}
784+
785+
.h-72 {
786+
height: 18rem;
787+
}
788+
789+
.h-\[350px\] {
790+
height: 350px;
791+
}
792+
793+
.h-\[400px\] {
794+
height: 400px;
795+
}
796+
781797
.max-h-full {
782798
max-height: 100%;
783799
}

‎public/js/app.js

Lines changed: 7 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -21235,7 +21235,7 @@ __webpack_require__.r(__webpack_exports__);
2123521235
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
2123621236

2123721237
var _hoisted_1 = {
21238-
"class": "relative"
21238+
"class": "relative w-full h-full"
2123921239
};
2124021240
var _hoisted_2 = ["src", "alt"];
2124121241
var _hoisted_3 = {
@@ -21245,18 +21245,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
2124521245
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Swiper"], {
2124621246
navigation: true,
2124721247
modules: [$setup.Navigation],
21248-
"class": "mySwiper"
21248+
"class": "w-full h-[400px]"
2124921249
}, {
2125021250
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
2125121251
return [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.images, function (image, index) {
2125221252
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["SwiperSlide"], {
21253-
key: index
21253+
key: index,
21254+
"class": "flex justify-center items-center bg-white w-full h-full"
2125421255
}, {
2125521256
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
2125621257
return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
2125721258
src: image.src,
2125821259
alt: 'Image ' + (index + 1),
21259-
"class": "w-full object-cover"
21260+
"class": "block w-full h-full object-cover"
2126021261
}, null, 8 /* PROPS */, _hoisted_2), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(image.text), 1 /* TEXT */)])];
2126121262
}),
2126221263

@@ -24253,30 +24254,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, "\n.link-underline[data-v-41f95097] {\r
2425324254
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2425424255

2425524256

24256-
/***/ }),
24257-
24258-
/***/ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css":
24259-
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
24260-
!*** ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css ***!
24261-
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
24262-
/***/ ((module, __webpack_exports__, __webpack_require__) => {
24263-
24264-
"use strict";
24265-
__webpack_require__.r(__webpack_exports__);
24266-
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
24267-
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
24268-
/* harmony export */ });
24269-
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
24270-
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
24271-
// Imports
24272-
24273-
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
24274-
// Module
24275-
___CSS_LOADER_EXPORT___.push([module.id, "\n.mySwiper {\r\n width: 100%;\r\n height: 350px;\n}\n.swiper-slide {\r\n text-align: center;\r\n font-size: 18px;\r\n background: #fff;\r\n\r\n /* Center slide images vertically */\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\n}\n.swiper-slide img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n -o-object-fit: cover;\r\n object-fit: cover;\n}\r\n", ""]);
24276-
// Exports
24277-
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
24278-
24279-
2428024257
/***/ }),
2428124258

2428224259
/***/ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/base/BaseTable.vue?vue&type=style&index=0&id=759b012a&lang=css":
@@ -42193,36 +42170,6 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
4219342170

4219442171
/***/ }),
4219542172

42196-
/***/ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css":
42197-
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
42198-
!*** ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css ***!
42199-
\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
42200-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
42201-
42202-
"use strict";
42203-
__webpack_require__.r(__webpack_exports__);
42204-
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
42205-
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
42206-
/* harmony export */ });
42207-
/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
42208-
/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
42209-
/* harmony import */ var _node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Carousel_vue_vue_type_style_index_0_id_1a53dec8_lang_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!../../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../../../node_modules/vue-loader/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css */ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css");
42210-
42211-
42212-
42213-
var options = {};
42214-
42215-
options.insert = "head";
42216-
options.singleton = false;
42217-
42218-
var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Carousel_vue_vue_type_style_index_0_id_1a53dec8_lang_css__WEBPACK_IMPORTED_MODULE_1__["default"], options);
42219-
42220-
42221-
42222-
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Carousel_vue_vue_type_style_index_0_id_1a53dec8_lang_css__WEBPACK_IMPORTED_MODULE_1__["default"].locals || {});
42223-
42224-
/***/ }),
42225-
4222642173
/***/ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/base/BaseTable.vue?vue&type=style&index=0&id=759b012a&lang=css":
4222742174
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
4222842175
!*** ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/base/BaseTable.vue?vue&type=style&index=0&id=759b012a&lang=css ***!
@@ -43549,16 +43496,13 @@ __webpack_require__.r(__webpack_exports__);
4354943496
/* harmony export */ });
4355043497
/* harmony import */ var _Carousel_vue_vue_type_template_id_1a53dec8__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Carousel.vue?vue&type=template&id=1a53dec8 */ "./resources/js/components/Index/Carousel.vue?vue&type=template&id=1a53dec8");
4355143498
/* harmony import */ var _Carousel_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Carousel.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/Index/Carousel.vue?vue&type=script&setup=true&lang=js");
43552-
/* harmony import */ var _Carousel_vue_vue_type_style_index_0_id_1a53dec8_lang_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css */ "./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css");
43553-
/* harmony import */ var _node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
43499+
/* harmony import */ var _node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
4355443500

4355543501

4355643502

4355743503

4355843504
;
43559-
43560-
43561-
const __exports__ = /*#__PURE__*/(0,_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__["default"])(_Carousel_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_Carousel_vue_vue_type_template_id_1a53dec8__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/Index/Carousel.vue"]])
43505+
const __exports__ = /*#__PURE__*/(0,_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_Carousel_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_Carousel_vue_vue_type_template_id_1a53dec8__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/Index/Carousel.vue"]])
4356243506
/* hot reload */
4356343507
if (false) {}
4356443508

@@ -44536,19 +44480,6 @@ __webpack_require__.r(__webpack_exports__);
4453644480
/* harmony import */ var _node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Navbar_vue_vue_type_style_index_0_id_41f95097_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/style-loader/dist/cjs.js!../../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../../../node_modules/vue-loader/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Navbar.vue?vue&type=style&index=0&id=41f95097&scoped=true&lang=css */ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=style&index=0&id=41f95097&scoped=true&lang=css");
4453744481

4453844482

44539-
/***/ }),
44540-
44541-
/***/ "./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css":
44542-
/*!************************************************************************************************!*\
44543-
!*** ./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css ***!
44544-
\************************************************************************************************/
44545-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
44546-
44547-
"use strict";
44548-
__webpack_require__.r(__webpack_exports__);
44549-
/* harmony import */ var _node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Carousel_vue_vue_type_style_index_0_id_1a53dec8_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/style-loader/dist/cjs.js!../../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../../../node_modules/vue-loader/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css */ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index/Carousel.vue?vue&type=style&index=0&id=1a53dec8&lang=css");
44550-
44551-
4455244483
/***/ }),
4455344484

4455444485
/***/ "./resources/js/components/base/BaseTable.vue?vue&type=style&index=0&id=759b012a&lang=css":

‎resources/js/components/Index/Carousel.vue

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
<template>
2-
<swiper :navigation="true" :modules="[Navigation]" class="mySwiper">
3-
<swiper-slide v-for="(image, index) in images" :key="index">
4-
<div class="relative">
5-
<img :src="image.src" :alt="'Image ' + (index + 1)" class="w-full object-cover" />
2+
<swiper
3+
:navigation="true"
4+
:modules="[Navigation]"
5+
class="w-full h-[400px]"
6+
>
7+
<swiper-slide
8+
v-for="(image, index) in images"
9+
:key="index"
10+
class="flex justify-center items-center bg-white w-full h-full"
11+
>
12+
<div class="relative w-full h-full">
13+
<img
14+
:src="image.src"
15+
:alt="'Image ' + (index + 1)"
16+
class="block w-full h-full object-cover"
17+
/>
618
<span
719
class="z-40 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 text-xl md:text-2xl text-black bg-white rounded-lg mt-4"
820
>
@@ -27,29 +39,4 @@
2739
Swiper,
2840
SwiperSlide,
2941
});
30-
</script>
31-
32-
<style>
33-
.mySwiper {
34-
width: 100%;
35-
height: 350px;
36-
}
37-
38-
.swiper-slide {
39-
text-align: center;
40-
font-size: 18px;
41-
background: #fff;
42-
43-
/* Center slide images vertically */
44-
display: flex;
45-
justify-content: center;
46-
align-items: center;
47-
}
48-
49-
.swiper-slide img {
50-
display: block;
51-
width: 100%;
52-
height: 100%;
53-
object-fit: cover;
54-
}
55-
</style>
42+
</script>

0 commit comments

Comments
 (0)