Joe Rosentoot

__redirect.md

Styles have moved to https://rmlewisuk.github.io/better-mastodon/

mastodon.js

const nav = document.getElementsByClassName('drawer__header')[0]

nav.innerHTML = '<a id="toot-toggle" class="drawer__tab" title="Toggle Toot" aria-label="Toot" href="#"><i role="img" class="fa fa-fw fa-edit"></i></a>' + nav.innerHTML

document.getElementsByClassName('drawer')[0].className = 'drawer rl-hide'

const toggle = document.getElementById('toot-toggle')
const openIcon = '<i role="img" class="fa fa-fw fa-edit"></i>'
const closeIcon = '<i role="img" class="fa fa-fw fa-chevron-left"></i>'
const drawer = document.getElementsByClassName('drawer')[0]

nav.addEventListener('click', function() {
	if (drawer.className.includes('rl-show')) {
		toggle.innerHTML = openIcon
		drawer.className = 'drawer rl-hide'
	} else {
		toggle.innerHTML = closeIcon
		drawer.className = 'drawer rl-show'
	}
});

const tootbox = document.getElementsByClassName('autosuggest-textarea__textarea')[0]

tootbox.addEventListener('focus', function() {
	toggle.innerHTML = closeIcon
	drawer.className = 'drawer rl-show'
})

mastondon.css

.drawer.rl-hide {
    width: 0!important;
  	margin-right: -10px!important;
}

.drawer.rl-hide .search {
    display: none!important
}

.drawer {
	width: 250px!important;
  margin-left: 85px!important;
}

.drawer__header {
  flex-direction: column!important;
  width: 75px!important;
  padding-top: 55px!important;
  position: absolute;
  left: 10px!important;
  top: 10px!important;
  z-index: 50!important;
}

.navigation-bar .account__avatar {
  position: fixed!important;
	top: 22px!important;
  left: 28px!important;
  z-index: 51!important;
}

.drawer__inner__mastodon { 
  display: none!important; 
}

/**
Make toolbar go to the left below 650px
*/
@media screen and (max-width: 650px) {
	.ui {
		flex-direction: row!important;
	}

	.tabs-bar {
		flex-direction: column!important;
		margin: 0!important;
	}

	.tabs-bar__link {
	    max-height: 10px!important;
	}

	.tabs-bar__link span {
		display: none!important;
	}

	.tabs-bar__link .fa {
		font-size: 20px!important;
	}
	
	.tabs-bar__link.active {
    	border-bottom: none!important;
	}

	.columns-area {
		padding: 0!important;
	}
	
	.react-swipeable-view-container .columns-area {
    		height: 100%!important;
	}
	
	.status__display-name,
	.status__prepend .status__display-name strong {
		color: #c2c2c2!important;
	}
}

/**
Make columns fill the screen at large sizes
*/

@media (min-width: 1000px)
  {
    .columns-area .column {
  		width: 25%!important;
    	max-width: 25%!important;
  	}
  
  .drawer {
        width: calc(20% - 95px)!important;
    }

  .columns-area>div>.column,
        .columns-area>div>.mastodon-column-container>.column
  {
    width: 100%;
  }
}

/**
Hide the elephant
*/
.drawer__inner__mastodon { display: none; }

/**
Make DMs a different colour
*/

.status.status-direct {
    background: #4f3939!important;
}

.status.status-direct.muted {
    background: transparent!important;
}