CSS嘅特色導致問題?


今日係公司最後一日,前後一個月嘅不被信任生涯(?)終於完結。

進入話題先。今日最後幫公司更新咗首頁,發現CSS有一個位係無辦法達成...

HTML:
<div class="col-4 portal-box p-0">
    <a href="{{ route('website.school.index') }}">
        <img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
        <h1 class="position-absolute portal-image-name text-center">學校管理</h1>
    </a>
</div>

SASS:
.portal-box {
    .portal-image {
        width: 100%;

        &:hover {
            opacity: 0.2;

            +.portal-image-name {
                z-index: 2;
            }
        }
    }

    .portal-image-name {
        width: 100%;

        bottom: 0;

        color: #000000;

        z-index: -1;

        &:hover {
            +.portal-image {
                opacity: 0.2;
            }
        }
    }
}

呢個位係當mouse移入張圖嗰陣就會淡化張圖並且會令遮住咗嘅字浮現出黎。問題係當滑鼠指向啲字嘅時候,張圖唔識得淡化......無理由架,明明我已經整咗會淡出架喎?

Compiled CSS:
.portal-box .portal-image-name:hover + .portal-image {
    opacity: 0.2;
}

然後我就去搵關於CSS Adjacent Siblings Selectors嘅嘢,發現我一直誤解佢同CSS General Siblings Selectors嘅用法...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector

最後唯有用jQuery達到效果...

Javascript:
$(document).ready(() => {
    $('.portal-image').on('mouseenter', function() {
        $(this).css('opacity', '0.2');
        $(this).siblings('.portal-image-name').css('z-index', '2');
    });
    $('.portal-image').on('mouseleave', function() {
        $(this).css('opacity', '1.0');
        $(this).siblings('.portal-image-name').css('z-index', '-1');
    });
    $('.portal-image-name').on('mouseenter', function() {
        $(this).siblings('.portal-image').css('opacity', '0.2');
        $(this).css('z-index', '2');
    });
    $('.portal-image-name').on('mouseleave', function() {
        $(this).siblings('.portal-image').css('opacity', '1.0');
        $(this).css('z-index', '-1');
    });
});

南無。

圖片無法被Laravel Mix進行編彙?


話說近日我就喺度整緊後台既新介面,將個人資料更新個位寫好之後就擺咗上黎先。又更新Laravel 5.6,又轉Bootstrap 4,SweetAlert2又上左7,然後database有啲欄位又更新咗。喺開發嗰陣搞完一大輪再試無問題,就諗住擺上黎production應該就無問題啦,點知就出咗事......

事緣係因為更新咗堆SASS檔既關係,我就要行Laravel Mix黎compile做CSS啦,點知喺local同dev行咗幾次都無問題,上到production居然炒咗,所以尋日就應該會見到成個版面亂晒,又或者無咗背景張雲圖(手機版睇唔到好正常)。

咁到底衰咗啲乜?我試過鏟晒node_modules成個folder再行npm install,發現mozjpeg呢個package無辦法安裝,但我喺Windows又裝到喎。原來係因為Ubuntu個server無裝到一堆package......


如是者,裝返相關既嘢之後又用得返啦。明明之前都好地地無問題......

總而言之今次係想話俾大家聽終於都更新咗啦,應該會喺黎緊慢慢再加返啲唔同既功能落去啦。

近況 #2


有咩慘得過返一份頹到爛既工?

公司規模:
2位老闆
2個高層
1個司機
1個全職
3個兼職

先係走咗2個兼職,然後1個高層1個全職各自走黎同我講「我想唔撈」──明明我只係一個時薪50既送餐...Part-time ICT Officer。再黎就感受到司機成日發出既一陣慵懶同怨氣,等等...

原本係想留低既心態逐漸被消磨殆盡。 w

近況


之前講過Laravel更新到5.6,而我結果都係抵唔住頸咁走去更新咗佢。無他既,如果係出面既project的話我應該會繼續用5.5,但係我自己個網站嘛就當重新整理加大執囉。

目前進度係:
1. 網誌已經更新好,當然唔係咩版面上既更新,而係將Bootstrap 4既野應用返上去。基本上除左有啲UI上既調整之外,整體設計其實無太大分別。
2. 大執緊後台嗰度。舊設計太核突,於是就重新整一次,最花時間亦都喺呢度。因為我打算將其他先前諗過既功能都擺上去既關係,所以應該會再花多少少時間喺呢度。

整容前。

整容後。

希望月中前會搞掂呢壇嘢。

Powered by Half-moon Production.

Copyright © 2011-2020 by 泣雨家的雜物房. Version 1.5.2.

CSS嘅特色導致問題?


今日係公司最後一日,前後一個月嘅不被信任生涯(?)終於完結。

進入話題先。今日最後幫公司更新咗首頁,發現CSS有一個位係無辦法達成...

HTML:
<div class="col-4 portal-box p-0">
    <a href="{{ route('website.school.index') }}">
        <img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
        <h1 class="position-absolute portal-image-name text-center">學校管理</h1>
    </a>
</div>

SASS:
.portal-box {
    .portal-image {
        width: 100%;

        &:hover {
            opacity: 0.2;

            +.portal-image-name {
                z-index: 2;
            }
        }
    }

    .portal-image-name {
        width: 100%;

        bottom: 0;

        color: #000000;

        z-index: -1;

        &:hover {
            +.portal-image {
                opacity: 0.2;
            }
        }
    }
}

呢個位係當mouse移入張圖嗰陣就會淡化張圖並且會令遮住咗嘅字浮現出黎。問題係當滑鼠指向啲字嘅時候,張圖唔識得淡化......無理由架,明明我已經整咗會淡出架喎?

Compiled CSS:
.portal-box .portal-image-name:hover + .portal-image {
    opacity: 0.2;
}

然後我就去搵關於CSS Adjacent Siblings Selectors嘅嘢,發現我一直誤解佢同CSS General Siblings Selectors嘅用法...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector

最後唯有用jQuery達到效果...

Javascript:
$(document).ready(() => {
    $('.portal-image').on('mouseenter', function() {
        $(this).css('opacity', '0.2');
        $(this).siblings('.portal-image-name').css('z-index', '2');
    });
    $('.portal-image').on('mouseleave', function() {
        $(this).css('opacity', '1.0');
        $(this).siblings('.portal-image-name').css('z-index', '-1');
    });
    $('.portal-image-name').on('mouseenter', function() {
        $(this).siblings('.portal-image').css('opacity', '0.2');
        $(this).css('z-index', '2');
    });
    $('.portal-image-name').on('mouseleave', function() {
        $(this).siblings('.portal-image').css('opacity', '1.0');
        $(this).css('z-index', '-1');
    });
});

南無。

圖片無法被Laravel Mix進行編彙?


話說近日我就喺度整緊後台既新介面,將個人資料更新個位寫好之後就擺咗上黎先。又更新Laravel 5.6,又轉Bootstrap 4,SweetAlert2又上左7,然後database有啲欄位又更新咗。喺開發嗰陣搞完一大輪再試無問題,就諗住擺上黎production應該就無問題啦,點知就出咗事......

事緣係因為更新咗堆SASS檔既關係,我就要行Laravel Mix黎compile做CSS啦,點知喺local同dev行咗幾次都無問題,上到production居然炒咗,所以尋日就應該會見到成個版面亂晒,又或者無咗背景張雲圖(手機版睇唔到好正常)。

咁到底衰咗啲乜?我試過鏟晒node_modules成個folder再行npm install,發現mozjpeg呢個package無辦法安裝,但我喺Windows又裝到喎。原來係因為Ubuntu個server無裝到一堆package......


如是者,裝返相關既嘢之後又用得返啦。明明之前都好地地無問題......

總而言之今次係想話俾大家聽終於都更新咗啦,應該會喺黎緊慢慢再加返啲唔同既功能落去啦。

近況 #2


有咩慘得過返一份頹到爛既工?

公司規模:
2位老闆
2個高層
1個司機
1個全職
3個兼職

先係走咗2個兼職,然後1個高層1個全職各自走黎同我講「我想唔撈」──明明我只係一個時薪50既送餐...Part-time ICT Officer。再黎就感受到司機成日發出既一陣慵懶同怨氣,等等...

原本係想留低既心態逐漸被消磨殆盡。 w

近況


之前講過Laravel更新到5.6,而我結果都係抵唔住頸咁走去更新咗佢。無他既,如果係出面既project的話我應該會繼續用5.5,但係我自己個網站嘛就當重新整理加大執囉。

目前進度係:
1. 網誌已經更新好,當然唔係咩版面上既更新,而係將Bootstrap 4既野應用返上去。基本上除左有啲UI上既調整之外,整體設計其實無太大分別。
2. 大執緊後台嗰度。舊設計太核突,於是就重新整一次,最花時間亦都喺呢度。因為我打算將其他先前諗過既功能都擺上去既關係,所以應該會再花多少少時間喺呢度。

整容前。

整容後。

希望月中前會搞掂呢壇嘢。