responsive dcinside

dc left align

2025. 2. 1.
2025-01-31 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        dc left align
// @namespace   Violentmonkey Scripts
// @match       https://gall.dcinside.com/*
// @grant       none
// @version     1.2
// @author      -
// @license     MIT
// @description 2025. 2. 1.
// ==/UserScript==

var prev = 1920;

window.onload = function() {
  onResize(window.innerWidth);
};

window.onresize = function() {
  onResize(window.innerWidth);
};

function onResize(w) {
  // adjust left margin
  // todo: native css implementation
  var residual = w - 1160
  if (residual > 355) {
    document.body.style.marginLeft = '0'
  } else {
    var residual = Math.max(residual, 40);
    document.body.style.marginLeft = (residual-355)/2 + 'px'
  }

  if (w < 1200 && prev >= 1200){
    configureContentLayout(true)
  }
  if (w >= 1200 && prev < 1200) {
    configureContentLayout(false)
  }

  prev = w
}

function configureContentLayout(narrow) {
  console.log("configureContentLayout", narrow)
  try{
    if (narrow){
      // 1160 layout to 840 layout
      // header
      document.getElementsByClassName('dchead')[0].style.width = '840px'
      document.getElementsByClassName('dchead')[0].style.paddingRight = '320px'
      document.getElementsByClassName('area_links')[0].style.paddingRight = '320px'
      document.getElementsByClassName('gnb')[0].style.width = '840px'
      document.getElementsByClassName('gnb')[0].style.paddingRight = '320px'
      document.getElementsByClassName('gnb_list')[0].style.width = '520px'

      document.getElementById('search_wrap').style.left = '100%'
      document.getElementById('search_wrap').style.marginLeft = '-684px'
      document.getElementsByClassName('visit_bookmark')[0].style.width = '840px'
      document.getElementsByClassName('visit_bookmark')[0].style.paddingRight = '320px'

      // content
      document.getElementsByClassName('right_content')[0].style.marginTop = '-40px'
    } else {
      // original 1160 layout
      // header
      document.getElementsByClassName('dchead')[0].style.width = '1160px'
      document.getElementsByClassName('dchead')[0].style.paddingRight = '0'
      document.getElementsByClassName('area_links')[0].style.paddingRight = '0'
      document.getElementsByClassName('gnb')[0].style.width = '1160px'
      document.getElementsByClassName('gnb')[0].style.paddingRight = '0'
      document.getElementsByClassName('gnb_list')[0].style.width = '840px'

      document.getElementById('search_wrap').style.left = '50%'
      document.getElementById('search_wrap').style.marginLeft = '-182px'
      document.getElementsByClassName('visit_bookmark')[0].style.width = '1160px'
      document.getElementsByClassName('visit_bookmark')[0].style.paddingRight = '0'

      // content
      document.getElementsByClassName('right_content')[0].style.marginTop = '0'
    }
  } catch (e) {
    console.error(e)
  }
}